velopert
7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook
const [number, setNumber] = useState(0); 이렇게 사용하는데 number 값이 변하는데 const 사용시에 어떻게 동작하게 되는걸까요? 초보자 질문이에요ㅠㅠ
@realopeningan 질문의 답변이 되기를 바랍니다 https://stackoverflow.com/questions/58860021/why-react-hook-usestate-uses-const-and-not-let
@EunkyoungJung 저건 useState 함수를 개발한 개발자가 정한거에요.
const [state, setState] = useState();
이렇게 했을 때, setState란 함수에 파라미터로 함수를 넘겨주면 이전 값을 넣어주는 걸로 개발이 된거에요.
이건 콜백함수 개념 알고 계셔야 이해가 쉬워요.
prevNumber => prevNumber + 1
이거 자체가 벨로퍼트님이 임의로 정의한 함수에요 그래서 파라미터명을 뭘로 쓰던 상관 없죠.
이해하기 쉽게 setState 내부를 쉽게 생각 하면(실제로 이렇단건 아닙니다... 단지 이해를 돕기 위해)
let previosValue = 0;
function setState(callback) {
previosValue = callback(previosValue);
}
여기서 callback이 prevNumber => prevNumber + 1이라고 생각하면 쉬워요.
useState의 원소스를 보고 싶으시면...
const onIncrease = () => { setNumber( number = number + 1); } 이렇게 했는데 오류나서 왜인가 했는데 useState 함수를 개발한 개발자가 정한거이군요??
setNumber(number + 1); 와 setNumber(prevNumber => prevNumber + 1); 에 차이점을 알고 싶습니다. 둘 중 아무거나 사용해도 무방한 것인가요?
@hks2000 음 hks200님 에러는 setNumber 함수 파라미터에 함수가 들어가야 되는데 선언문이 되었어요. setNumber(number => number + 1) 이렇게 바꾸셔야 동작해요
@kkwondev 저도 실전 리액트 프로그래밍 이란 책을 보고 알았는데요. setNumber(prevNumber => prevNumber + 1); 이렇게 함수형으로 파라미터를 넘겨주면 상태값 변경을 배치로 처리한다고 하네요. 아래 코드 예제로 쳐보면 둘다 다른 결과 알수 있을거에요
const [count, setCount] = useState(0);
const onClick = () => {
setCount(count+ 1);
setCount(count+ 1);
console.dir(count);
}
const onClick = () => {
setCount(count=> count+ 1);
setCount(count=> count+ 1);
console.dir(count);
}
질문이있는데 number와 setNumber의 비구조화 할당은 이해를 했습니다.
근데 비구조화할당을 미사용시, numberState는 어디서 나온건지 궁금합니다.
@awdsza
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];
위 코드와 아래 코드는 같은 코드입니다
const [number, setNumber] = useState(0);
numberState는 개발자가 임의로 지정한 변수이구요
@Wuwon 숫자를 관리하는 state를 만들어서 관리할 수 있습니다.
const [count, setCount] = useState(0);
@Wuwon
이미 예시에서 작성되어 있었네요..^^; 작성한 코멘트가 수정, 삭제가 안되네요 ㅠ onDecrease 함수에서 number의 조건을 분기하시면 됩니다.
useState
화살표함수
- 형태
const funcName () => {
//body
}
리액트에서 이벤트 설정을 주로 "on이벤트이름={함수이름}" 형태로 작성한다.
state 선언 방식
const [number, setNumber] = useState(0);
return(
<div>{number}</div>
)
usSstate 동작 원리
- 배열 비구조화 할당을 활용
- 첫번째 원소는 현재 상태, 두번째 원소는 setter 함수
- 원래대로라면
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];
useState // 상태(state : 동적인 값)를 관리 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수 배열 비구조화 할당을 통하여 각 원소 추출
리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정 **함수 실행 형태로 기입 시 렌더링되는 시점에서 함수가 호출되기 때문에 함수형태로 설정
함수형 업데이트 setter에 함수를 등록하는 방식으로 값을 업데이트 함수형 업데이트는 주로 컴포넌트를 최적화할 때 사용
질문이 있습니다. 'setNumber라는게 어차피 number에 대한 setter함수이기 때문에 prevNumber든 뭐든 아무렇게나 선언해서 값을 바꿔줘도 어차피 number의 값이 바뀌는거다' 라고 이해해도 될까요?
이런 느낌적인 느낌
function useState(initialValue) {
let _val = initialValue;
function state() {
return _val;
}
function setState(newVal) {
_val = newVal;
}
return [state, setState];
}
- hook의 종류 중에서 상태 관리를 해주는 useState가 있다.
- 함수형 업데이트 형식으로 적어주기.
- 이벤트 주는 경우에는 함수명만 적어주기. => ()까지 쓰면 렌더링 되는 시점에 실행된다.
- 다른 파일 가져오거나 useState 이용하는 경우에는 import 이용하기.
const Decredible = () => { return number > 0 ? setNum(pre => pre - 1) : false }
-1 버튼을 눌렀을 때 0 밑으로 내려가게하지 않으려면 Decrease하는 함수에 삼항연산자를 이용하면 되겠네요
prevNumver는 글쓴이께서 맘대로 정한 파라미터 이름일뿐입니다. const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } 여기서 prevNumber => prevNumber + 1 는 arrow function을 사용해서 축약해논 하나의 함수이구요. setNumber라는 setter안에 함수를 인자로 넣어서 사용해서 함수형 업데이트입니다. prevNumber => prevNumber + 1 를 다시 보면 function noName (prevNumber) { return prevNumber + 1; } 이랑 같은 거고, 이걸 익명함수로 변경하면 function (preveNumber) { return prevNumber +1; } 이걸 arrow function으로 변경하면 (prevNumber) => return prevNumber + 1; arrow function에서 실행줄이 1줄이면 return을 생략 가능하니 (prevNumver) => prevNumber +1; 이 된겁니다.
@owstork94 원래 자바스크립트 문법이 아닙니다. @kkwonsubdev setNumber(number + 1); 와 setNumber(prevNumber => prevNumber + 1); 의 차이점은 리액트의 함수형 업데이트를 통해 비동기 값 처리를 해결하기 위해 씁니다. 이는 합수형 업데이트 라고 검색해보시면 자료가 많습니다. @hks2000 setNumber( number = number + 1); 이건 개발자가 정해놔서 오류가 난게 아니라, setter안에 들어갈 인자를 잘못 넣으신겁니다. setter 자체가 state를 변경하는 함수이기때문에 값을 넣어야 하는데, setter 안에다가 선언문을 넣으셔서 에러가 나는거네요.
혹시 제 답변도 틀린게 있다면 수정 부탁드립니다.
