2022. 8. 3. 16:28ㆍ카테고리 없음
1.대문자로 시작 (소문자는 html 돔태그를 쓴 엘리먼트로 인식)
2.리턴값으로 리액트 엘리먼트
3.컴포넌트를 JSX문법안에서 태그처럼 지정해서 사용가능 <Component1 prop1="hi"> children </Component1>
index.js:root를 찾아 편집용 , App을 호출, App은 다른 파일들의 내용을 호출해서 jsx에 태그처럼 사용
index.html:바뀐 내용이 반영된 출력용
props: 컴포넌트 태그에 지정한 속성, 하나의 객체형태로 컴포넌트 함수의 첫번째 파라미터로 전자
childeren: 컴포넌트를 여닫이로 쓸 때 가운데 값을 children이라는 이름의 props로 사용, html태그나 다른 컴포넌트등 사용
state:리액트에서의 변수
import {useState} from 'react';
const [ gameHistory, setGameHistory] = useState([]); // 파라미터값을 받아 초기화,리턴값 2개의 요소(바꿀 값,set함수)
gameHistory 바뀌는 값,배열
setGameHistory(새로 들어갈 값)바꾸는 함수 e.g setGameHistory([...GameHistory,nextNum]);
리액트 컴포넌트는 퓨어함수 (파라미터인 props값을 바꾸지 않는다, 같은 props를 넣은 결과물은 항상 같음)
클래스 컴포넌트 - React.Component를 상속받아 만듬
class Welcome extends React.Component {
render(){
return <h1> 안녕, {this.props.name} </h1>;
}
}