🥨 3.4 state
3.4.2 함수 컴포넌트에서 useState 사용하기
- 리액트 16.8 이전 버전에서는 함수 컴포넌트에서 state를 사용할 수 없었다. 하지만 16.8 이후부터는 useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었다.
- 이 과정에서 Hooks라는 것을 사용하게 되었다.
3.4.2.1 배열 비구조화 할당
- 배열 비구조화 할당: 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법
const array = [1, 2];
const one = array[0];
const two = array[1];위 코드를 배열 비구조화 할당을 사용하여 다음과 같이 더 깔끔하게 표현할 수 있다.
const array = [1, 2];
const [one, two] = array;3.4.2.2 useState 사용하기
- 배열 비구조화 할당 문법을 알고 나면 useState 사용 방법을 쉽게 이해할 수 있다.
▶ Say.js
import { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
);
};
export default Say;- useState 함수의 인자에는 상태의 초깃값을 넣어준다.
- 클래스형 컴포넌트에서의 state 초깃값은 객체 형태를 넣어 주어야 하지만 useState에서는 반드시 객체가 아니어도 상관없다. -> 값의 형태는 자유
- 함수를 호출하면 배열이 반환
- 첫 번째 원소 : 현재 상태
- 두 번째 원소 : 상태를 바꾸어 주는 함수
- 이 함수를 세터함수라 한다.
▶ Say.js
import Say from './Say';
const App = () => {
return <Say />;
};
export default App;
- 입장 버튼과 퇴장 버튼을 누르면 각 함수에 맞는 문구를 브라우저에 출력한다.
3.4.2.3 한 컴포넌트에서 useState 여러 번 사용하기
- useState는 한 컴포넌트에서 여러 번 사용해도 상관없다.
▶ Say.js
import { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{ color }}>{message}</h1>
<button style={{ color: 'red' }} onClick={() => setColor('red')}>
빨간색
</button>
<button style={{ color: 'green' }} onClick={() => setColor('green')}>
초록색
</button>
<button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
파란색
</button>
</div>
);
};
export default Say;- 코드를 저장하고 입장 버튼을 눌러서 텍스트를 띄운 후 색상이 표시되어 있는 버튼을 누르면 텍스트 색생이 바뀐다.
🥨 3.5 state를 사용할 때 주의 사항
- state값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 한다.
▶ 잘못된 코드 예시
// 클래스형 컴포넌트에서...
this.state.number = this.state.number + 1;
this.state.array = this.array.push(2);
this.state.object.value = 5;
// 함수 컴포넌트에서...
const [object, setObject] = useState({ a:1, b:1 });
object.b = 2;- 배열이나 객체를 업데이트해야 할 때는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState혹은 세터 함수를 통해 업데이트 한다.
▶ 올바른 코드 예시
// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = {...object, b: 2}; // 사본을 만들어서 b 값만 덮어 쓰기
// 배열 다루기
const array = [
{ id: 1, value: true },
{ id: 2, value: true },
{ id: 3, value: false }
];
let nextArray = array.concat({ id: 4 }); // 새 항목 추가
nextArray.filter(item => item.id !== 2); // id가 2인 항목 제거
nextArray.map(item => (item.id === 1 ? { ...item, value: false } : item)); // id가 1인 항목의 value를 false로 설정- 객체에 대한 사본을 만들 때는 spread 연산자라 불리는 ...을 사용하여 처리하고, 배열에 대한 사본을 만들 때는 배열의 내장 함수들을 활용한다.
🥨 3.6 정리
- props와 state는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있다.
- props는 부모 컴포넌트를 설정하고, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다.
- props를 사용한다고 해서 값이 무조건 고정적이지는 않다.
- 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메서드를 호출하면 props도 유동적으로 사용할 수 있다.
- 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메서드를 호출하면 props도 유동적으로 사용할 수 있다.
- 새로운 컴포넌트를 만들 때는 useState를 사용하는 것을 권장한다.
- 코드가 간결해진다.
- 리액트 개발 팀이 함수 컴포넌트와 Hooks를 사용하는 것이 주요 컴포넌트 개발 방식이 될 것이라고 공지했다.
개발 기록장