2024.08.09

React

• useState hook을 중심으로 state와 setState를 이해합니다.
• state와 onClick, onChange 메서드를 결합하는 예제를 작성하고 이해합니다.
• 불변성이 리액트에서 뭘 의미하는지, 왜 중요한지 설명할 수 있습니다.

State

컴포넌트 내부에서 바뀔 수 있는 값

Why? UI(엘리먼트)로의 반영을 위해 바뀌어야 합니다.

 

State를 만들 때는 useState()를 사용합니다.

useState()는 state를 만들어주는 리액트에서 제공하는 기능 `훅(hook)` 입니다.

 

const [ value, setValue ] = useState( 초기값 ); // 배열의 구조분해 할당이 사용되었습니다.!

 

배열의 첫 번째 자리에는 이 state의 이름,

두 번째  자리에는 set을 붙이고 state의 이름을 붙입니다.

그리고 useState()의 인자에는 이 state의 원하는 처음값을 넣습니다.

 

<onClick>

state를 변경할 때는 setValue(바꾸고 싶은 값)를 사용합니다.

 

인라인으로 많은 코드를 작성하는 것은 권장하지 않습니다.

 

<onChange>

 

value속성을 연결하지 않았을 때를 비제어 컴포넌트,

value속성을 연결했을 때를 제어 컴포넌트라고 합니다.

 

일반적으로 폼 데이터를 더 명확하게 제어하고 싶다면 제어 컴포넌트 방식을 사용하는 것이 좋습니다.

그렇게 해야 입력 필드의 값이 항상 예측 가능하고 관리하기 쉬운 상태로 유지할 수 있습니다.!

 

 

불변성

메모리에 있는 값을 변경할 수 없는 것

자바스크립트의 데이터 형태중

원시데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없습니다.(가변합니다.)

 

 

변경 가능한  방법(Mutable way)

let numbers = [1, 2, 3];
numbers.push(4); // 배열에 직접 요소를 추가
console.log(numbers); // [1, 2, 3, 4]

 

 

불변성을 유지하는 방법(Immutable way)

let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4]; // 새 배열을 생성하여 기존 배열을 변경하지 않음
console.log(numbers); // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]

 

리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인합니다.