state는 언제 쓰는 것?
-> 변동 시 자동으로 html 에 반영되게 만들고 싶을 때
즉, 자주 변경될 거 같은 html 부분은 state로 만들어두기
코딩애플 - 리액트 환경에서 동적인 UI 만들기
3step
- html, css로 미리 디자인 마크업
- UI의 현재 상태를 state로 저장하기
- state에 따라 UI가 어떻게 보일지 작성
부모 -> 자식 state 전송하는 법
(부모: app , 자식: modal / 컴포넌트안에 컴포넌트가 품어진 구조인 상황을 비유하여 부모, 자식 컴포넌트로 칭함)
<자식컴포넌트 작명={state이름}>
props 파라미터 등록후 props. 작명 사용
자식 컴포넌트의 state -> 부모 컴포넌트로 전송하거나, 자식이 아닌 다른 컴포넌트에 전송도 당연히 불가
=> 그렇기에 state 만드는 곳은 state를 사용하는 컴포넌트 중 최상위 컴포넌트!
생각하기 귀찮으면 그냥 App 에 만드셈..
< input >에 뭔가 입력시 코드실행을 원한다면
onChange / onInput
onChange={()=> { ??? }}
배열관련 ,,,
인자와 호출하는 내용이 동일하다면 함수의 이름(참조값)만 전달
useState(초기화하는함수) // 함수의 레퍼런스만 전달
useState(()=> 초기화하는함수()) // 위와 동일함, 단, 콜백함수를 만듦 (단점을 꼽자면, 불필요한 함수가 만들어 진다는 단점이 있음)
