react component, state 공부

component만드는법
1, function만들기
2. return()안에 html 담기
3<함수명></함수명>쓰기

주의할 점 :
1. component에는 하나의 tag로 시작해서 동일한 tag로 끝내야함
2. 의미없는 tag는 <></>로 표시 ex) <div></div>대신 <></>로 표시
--> 왜냐하면 한 컴포넌트에는 1번과 같이 하나의 tag로 끝내야함. 근데 부득이하게 div를 또 써야하면
그 div를 위한 다른 div를 사용해서 하나의 div로 묶어줘야함, 그럴 땐 fragment (<></>)를 사용

컴포넌트 사용하면 좋은 경우 :
1. 반복적인 html 축약할 때
2. 큰 페이지
3. 자주 변경되는 것들
--> 항상 적용되는 사항은 아님

단점은 많은 컴포넌트가 있으면 state로 공통된 변수들을 가지고 올 수 없음

동적 ui 만드는 step
1. html css로 미리 디자인 완성
2. ui의 현재 상태를 state로 저장
3. stste에 따라 ui가 어떻게 보일지 작성

props만드는 이유
한 컴포넌트 안에 있는 요소를 다른 곳에서 못씀. 그러나 자식 부모관계에서는 사용 가능 : 부모 -> 자식
부모 -> 자식 state 전송
방법 : 
부모 컴포넌트 안에 자식 컴포넌트 사용하는 곳으로 가기 
자식에서 어떻게 쓸건지 작명 -> 일반적으로 부모 요소와 이름 동일하게 해줌
자식 컴포넌트에서 파라미터 추가한 후, props.으로 접근
state는 부모에서 자식으로만 움직이기 때문에 자식 안에 스테이트를 사용해도됨. 근데 상위 컴포넌트와 하위 컴포넌트에서
모두 사용하려면 상위 컴포넌트에서 state를 선언해놔야함