[ React ] React Hooks 정리 1 - useState

useState

컴포넌트의 상태값 관리를 위해 사용. 유동적인 값을 바인딩 하기 위해 사용

state 변경시마다 컴포넌트는 다시 렌더링된다.

컴포넌트 렌더링의 조건👇🏻👇🏻👇🏻

1. setState로 state 변경이 있을 때
2. 새로운 props이 들어올 때
3. 부모 컴포넌트가 렌더링 될 때
4. shouldComponentUpdate에서 true가 반환될 때
     - 기본값은 true로 보통 렌더링이 일어나지만, 개발자가 false로 리턴값을 변경한 경우는 렌더링 되지않음
5. forceUpdate가 실행될 때

 

1. 사용 형태

const [ 현재상태값(state) , 현재 상태를 변경할수 있는 함수(setState) ] = useState( 초기값 )

 

useState는 state와 setState를 배열 형태로 리턴

state와 setState의 이름은 임의로 지정이 가능한데, 

보통 setState부분에는 state의 이름에 set을 붙여 사용한다

ex) const [number, SetNumber] = useState(0)

 

 

 

2. useState 초기값 지정

useState의 인자로 초기값을 지정할 수 있다.  관련 예제는 아래와 같다.

 

( 예제2 참고 ) 초기값을 가져오는데 과정이 길어져 함수로 지정해서 사용하는 경우

useState를 사용해서 초기 값을 받아올 때 맨 처음에만 렌더링이 일어나게 하고싶은 경우 에는 예제2-2를 참고!

/* 예제 1 */
const [number, SetNumber] = useState(0)
// 초기값은 0


/* 예제 2 - 1 */
function getUserList(){
  //...getList
  return ['user1', 'user2', 'user3']
}

const [users, SetUsers] = useState(getUserList())
// 이렇게 하면 state변경시마다 getUserList()함수가 계속 실행된다.

/* 예제 2 - 2 */
function getUserList(){
  //...getList
  return ['user1', 'user2', 'user3']
}

const [users, SetUsers] = useState(() => getUserList())
// 이처럼 콜백함수로 지정하면 getUserList()함수는 맨 처음 렌더링 되었을때만 실행된다

 

3. setState 예제 + 참고 

setState로 state를 변경하는 예제는 아래와 같다.

( 예제2 참고 ) 스테이트를 변경할 때 새로 변경될 스테이트 값이 이전 스테이트 값과 연관이 되어 있다면

setState의 인자로 새로운 스테이트를 리턴하는 콜백 함수를 넣어주는 게 좋다. 

/* 예제 1 */
const [number, SetNumber] = useState(0)
SetNumber(number + 1)
// state의 값을 증가만 해서 변경 시키는 경우

/* 예제 2 */
const [users, SetUsers] = useState(['user1', 'user2'])
setUsers(prevState=>{
  //'user3' 추가
  return [...prevState, 'user3']
})
// 기존 state값에 특정 값을 추가하여 변경시키는 경우

 

---

✔️ 참고

https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=1 

https://seungddak.tistory.com/109