[React] modifier 함수, React.useState()

const food = ['tomato', 'potato'];
const [veg1, veg2] = food;

// console.log(veg1)  ->> tomato
// console.log(veg2)  ->> potato

 

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

const onClick = () => {
setCounter(counter+1) 		
setCounter((current) => current +1);

};

modifier함수를 이용해 state 변경하면 해당 컴포넌트 전체가 재생산(re-render)된다. 

 

const [counter, setCounter] = React.useState(); 에서

React.useState() 는 react기능을 쓸 수있게 해주는 하나의 도구이고,

// [초기값, 그 값을 바꾸는 함수] array로 나옴

counter은 현재의 값 state 이며,

// counter: 초기값이자 리랜더 됐을 때의 현재 값
setCounter은 이벤트 발생시 변화를 주는 부분이어서 이후 counter로 다시 저장

// setCounter: modifier함수(초기값의 변수명 앞에 set을 붙여 함수명 지음)

 

setCounter(counter+1)은 counter에 +1해준 값을 counter에 다시 저장하라는 뜻

setCounter((current)=>current+1)이 더 안전

// setCounter(current+1): 직접 값을 설정해주는 방법

// setCounter((current)=>current+1): 함수를 전달하는 방법. 더 안전함. current는 확실히 현재 state라는 것을 보장하기 때문