useState()

1. 변수 State 선언하기

가장 기본적인 hook으로, 클래스형 컴포넌트에서만 가능했던 가변적인 상태를 함수형 컴포넌트에서도 가능하게 함.

const [ count, setCount ] = useState(initialValue);

useState(initialValue)로 state 초기값을 설정할 수 있는데 initialValue는 state의 초기값으로 설정할 값을 넣어주면 됨. useState() 함수를 호출하면 ① state 변수(count)와 ② state를 갱신할 수 있는 함수(setCount) 배열을 반환함.

// 1. 함수형 컴포넌트의 state 초기화
const [count, setCount] = useState(0);

// 2 . 클래스형 컴포넌트의 state 초기화
class Example extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
      		count: 0
    	};
  }

usetState()를 이용한 state 초기화는 클래스형 컴포넌트에서 constructor() 내부에서 this.state를 할당하는 것과 동일함.

 

2. State 갱신하기

// 1. 함수형 컴포넌트의 state 갱신
setCount(count + 1);

// 2. 클래스형 컴포넌트의 state 갱신
this.setState({ count: this.state.count + 1 })};

클래스형 컴포넌트에선 State를 setState()에 넣어 갱신한 것처럼 함수형 컴포넌트에서도 비슷하게 새 State값을 지정해줄 수 있음. useState() 함수에서 반환된 함수 setCount()를 통해 state를 갱신할 수 있는데, setCount(count + 1)은 이전의 state(count = 0)에 1을 더한 값을 새 state로 반환한다는 의미이므로 새 State는 count = 1.

// 1. 함수형 컴포넌트의 state 갱신
setCount(prevCount => prevCount + 1);

// 2. 클래스형 컴포넌트의 state 갱신
this.setState(prevState => ( { count: prevState.count + 1 } ));

콜백 함수 형태로는 위와 같이 쓸 수 있음.

 

 

 

3. 주의사항

A. 파생 State(Derived State)는 State로 관리할 필요가 없음

2022.07.09 - [React] - State를 변경할 때 주의할 점들

 

 

B. State 업데이트는 비동기적으로 작동함

const handleInputChange = (e) => {
    setInputs(e.target.value);   // inputs 업데이트

    setFiltered(options.filter((opt) => {
        return opt.substring(0, inputs.length) === inputs;   // inputs를 바로 사용함
    }));
};

React에서는 효율적인 렌더링을 위해 State 변경 사항을 한번에 모아서 업데이트(Batch Update)하기 때문에 State를 한번에 여러 번 변경하거나, 어느 한 State에 의존하는 다른 State를 변경할 경우 새로 갱신된 값에 접근하지 못할 수 있음.

 

 

 

 

 

[참고]

What is the best way to filter data in React?