함수형 프로그래밍
클래스 X
리액트는 사용자가 만들어놓은 jsx코드를 렌더링 하는데,
state와 props 의 변화에 따라 동적으로 렌더링을 함!
1.
하위태그에서 props로 컴포넌트를 연결
return div안 여는태그와 닫는태그 안에있는건
하위컴포넌트에서 children으로도 받을수있음(구조분해할당 가능)
ㄴ children.props로도 가능
2.
하위 컴포넌트에서 props로 받고 그곳에서 jsx 조작
(props로 받은걸 {???.props}로 받을수도있음)
3.
빈태그를 이용하면 return안에 바로 여러 div설계 가능
<> </>
4.
input안에 value={value} 는 입력값을 뜻함
onchange
value를 입력하려면 state에 넣어서 화면을 갱신되게함
onchange로 change가 일어날때마다 value값을 넣어줄 거다.
form안에 onSubmit -> Form 태그 안에서 버튼을 누르면 Form 안에있는 내가 쓴 녀석들이 return된다
5.
const {todos, setTodos} = useState(initialTodos)
useState 구조분해할당 이런식으로 작동
useState가 return하는 값이 [state, setState];
const todos = state
const setTodos = setState
setTodos(변경할 값) —> todos
setState는 항상 이전 값을 인자로 가진다!!
배열을 변경하는 경우!!
setTodos((prev) => {
return […prev, ‘something’];
})
