React 공식문서 스터디 23

useState 공식문서 스터디(3)

객체 및 배열 state 업데이트 state에는 객체와 배열도 넣을 수 있다. 리액트에서 state는 읽기 전용으로 간주되기 때문에 기존 객체를 바꾸지 않고 교체를 해야한다. state에 form객체가 있는 경우에는 바꾸지마라. 대신 새로운 객체를 생성하여 전체 객채를 교체하면 된다.  초기 state 다시 생성하지 않기리액트는 초기 state를 한번 저장하고 다음 렌더링부터는 이를 무시한다.createInitialTodos()의 결과는 초기 렌더링에만 사용되지만, 여전히 모든 렌더링에서 이 함수를 호출한다. 이는 큰 배열을 생성하거나 복잡한 계산을 수행하는 경우 낭비가 될 수 있다. 이 문제를 해결하려면 useState에 초기화 함수로 전달하면 된다. 함수를 호출한 결과인 createInitialTod..

useState 공식문서 스터디 (2)

Usage사용법컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수를 선언한다.배열 구조 분해를 사용하여 [something, setSomething] 과 같은 state 변수의 이름을 지정해야 한다.useState는 두 개의 항목이 있는 배열을 반환한다.이 state 변수의 현재 state로 처음에 제공한 초기 state로 설정된다.상호작용에 반응하여 다른 값을 변경할 수 있는 set함수 이다.화면의 내용을 업데이트 하려면 이 state로 set 함수를 호출한다.React는 다음 state를 저장하고 새로운 값으로 컴포넌트를 다시 렌더링한 후 UI를 업데이트한다. set 함수를 호출해도 이미 실행중인 코드의 현재 state는 변경되지 않는다.(예시) set함수는 다음 렌더링..

useState 공식문서 스터디(1)

useState(initialState)초기에 state를 설정할 값으로 모든 데이터 타입이 허용되고 초기 렌더링 이후에는 무시된다.함수를 initialState로 전달하면 이를 초기화 함수로 취급한다. 이 함수는 반드시 어떠한 값을 반환해야 한다.React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다. -return (반환하기)useState는 두 개의 값을 가진 배열을 반환한다. useState는 훅이므로 컴포넌트의 최상위 레벨이나 직접 만든 훅에서만 호출할 수 있다. 반복문이나 조건문 안에서는 호출할 수 없다. 필요하다면 새 컴포넌트를 추출하고 state를 그 안으로 옮기면 된다.Strict Mode 에서 리액트는 의도치 않은 상황을 위해 초기화 함수를 ..