[React] State Functions (state 값 설정 방법 2가지)

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!

출처 : https://nomadcoders.co/react-for-beginners

 

이전글에 이어,

[React] JSX문법 기초 (JS to JSX)

[React] 컴포넌트 state (React.useState(), setState)

 

이번에는 state 값을 설정하는 방법 2가지에 대해 배워보도록 하겠습니다.

 

1. 직접 새로운 값 설정

- 필요한 소스만 가져왔습니다. 지난 번처럼 직접 새로운 값을 설정하는 방법은 다음처럼 setCounter()함수에 0,1처럼 값을 넣거나 기존 변수에 값을 계산하여 넣는 방법이 있습니다.

let [counter, setCounter] = React.useState(0);

const onclick = () =>{
    // state 값 설정 방법
    // 1. 직접 새로운 값 설정       
    setCounter(counter + 1);
};

 

2. 함수 형태로 전달

- 현재 state를 바탕으로 다음 state를 계산하는 콜백 함수를 넣습니다.

- 위의 방식처럼 counter로 할 경우 값이 다른 곳에서 변경될 수도 있기 때문에 아래처럼 함수 형태 전달이 안정적입니다.

let [counter, setCounter] = React.useState(0);

const onclick = () =>{
    setCounter((current) => current + 1); 
};

 

다음 글에서는 단위 변환기를 만들어보겠습니다.

[React] input state () - 단위변환기1 Warning : Invalid DOM property

 

읽어주셔서 감사합니다.