Til (2022.12.09)

함수형 프로그래밍

클래스 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’];

})