7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

[utterances-bot]

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

undefined

https://react.vlpt.us/basic/07-useState.html

[realopeningan]

const [number, setNumber] = useState(0); 이렇게 사용하는데 number 값이 변하는데 const 사용시에 어떻게 동작하게 되는걸까요? 초보자 질문이에요ㅠㅠ

[ghost]

@realopeningan 질문의 답변이 되기를 바랍니다 https://stackoverflow.com/questions/58860021/why-react-hook-usestate-uses-const-and-not-let

[EunkyoungJung]

위의 함수형 업데이트 예시에서 "prevNumber"를 선언한적이 없는데 어디서 나타난건가요?!ㅜㅜㅜ

[ljhyeok]

@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의 원소스를 보고 싶으시면...

• 참조
• 블로그

[hks2000]

const onIncrease = () => { setNumber( number = number + 1); } 이렇게 했는데 오류나서 왜인가 했는데 useState 함수를 개발한 개발자가 정한거이군요??

[kkwonsubdev]

setNumber(number + 1); 와 setNumber(prevNumber => prevNumber + 1); 에 차이점을 알고 싶습니다. 둘 중 아무거나 사용해도 무방한 것인가요?

[ljhyeok]

@hks2000 음 hks200님 에러는 setNumber 함수 파라미터에 함수가 들어가야 되는데 선언문이 되었어요. setNumber(number => number + 1) 이렇게 바꾸셔야 동작해요

[ljhyeok]

@kkwondev 저도 실전 리액트 프로그래밍 이란 책을 보고 알았는데요. setNumber(prevNumber => prevNumber + 1); 이렇게 함수형으로 파라미터를 넘겨주면 상태값 변경을 배치로 처리한다고 하네요. 아래 코드 예제로 쳐보면 둘다 다른 결과 알수 있을거에요

• 참조1
• 참조2

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);
}

[awdsza]

질문이있는데 number와 setNumber의 비구조화 할당은 이해를 했습니다.

근데 비구조화할당을 미사용시, numberState는 어디서 나온건지 궁금합니다.

[Kyounghwan01]

@awdsza

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

위 코드와 아래 코드는 같은 코드입니다

const [number, setNumber] = useState(0);

numberState는 개발자가 임의로 지정한 변수이구요

[owstork94]

그 prevNumber 는 원래 있던 자바스크립트 문법인거죠?? 어휴 강의참 쉽게 잘 만드셨네요 !

[Wuwon]

0 밑으로 내려가지 않도록 onDecrease함수에 제한을 두고 싶습니다. 좋은 방안이 있을까요

[mynamesunpower]

@Wuwon 숫자를 관리하는 state를 만들어서 관리할 수 있습니다.

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

[mynamesunpower]

@Wuwon

이미 예시에서 작성되어 있었네요..^^; 작성한 코멘트가 수정, 삭제가 안되네요 ㅠ onDecrease 함수에서 number의 조건을 분기하시면 됩니다.

[wenodev]

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];

[jody96]

감사합니다!!!

[sshusshu]

useState // 상태(state : 동적인 값)를 관리 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수 배열 비구조화 할당을 통하여 각 원소 추출

리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정 **함수 실행 형태로 기입 시 렌더링되는 시점에서 함수가 호출되기 때문에 함수형태로 설정

함수형 업데이트 setter에 함수를 등록하는 방식으로 값을 업데이트 함수형 업데이트는 주로 컴포넌트를 최적화할 때 사용

[GitPJS]

질문이 있습니다. 'setNumber라는게 어차피 number에 대한 setter함수이기 때문에 prevNumber든 뭐든 아무렇게나 선언해서 값을 바꿔줘도 어차피 number의 값이 바뀌는거다' 라고 이해해도 될까요?

[can019]

@GitPJS 네 맞습니다.

[DoK6n]

이런 느낌적인 느낌

function useState(initialValue) {
  let _val = initialValue; 
  function state() {
    return _val;
  }
  function setState(newVal) {
    _val = newVal;
  }
  return [state, setState];
}

[ghost]

1. hook의 종류 중에서 상태 관리를 해주는 useState가 있다.
2. 함수형 업데이트 형식으로 적어주기.
3. 이벤트 주는 경우에는 함수명만 적어주기. => ()까지 쓰면 렌더링 되는 시점에 실행된다.
4. 다른 파일 가져오거나 useState 이용하는 경우에는 import 이용하기.

[ghost]

5. 컴포넌트 대문자로 작성하기.
6. export default 잊지 않기.

[Liverpooll]

const Decredible = () => { return number > 0 ? setNum(pre => pre - 1) : false }

-1 버튼을 눌렀을 때 0 밑으로 내려가게하지 않으려면 Decrease하는 함수에 삼항연산자를 이용하면 되겠네요

[ohshinyeop]

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 안에다가 선언문을 넣으셔서 에러가 나는거네요.

혹시 제 답변도 틀린게 있다면 수정 부탁드립니다.