REACT 기초 : hooks

Seri Park·2021년 4월 29일
0

useState 이해하기

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

이거를 심플하게 한줄로 const [ number, setNumber ] = useState( 0 ); 이렇게 쓸수있다

import React, { useState } from 'react';

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

 const onIncrease = ( ) => {
  setNumber ( number +1 );
}; 
 const OnDecrease = ( ) => {
  setNumber ( number -1 );
};

return (
  <div>
          <h1> { number } </h1>
           <button onClick={onIncrease}>+1</button>
           <button onClick={onDecrease}>-1</button> 
  </div>
)
}

export default Counter;

근데 여기서 setNumber는 클래스 컴포넌트에서 setState를 하는것과 동일한데
setNumber 안에서 number라는 것을 바로쓰면 안된다. (근데 왜)
클래스컴포넌트에서 setState를 하기위해서 함수를 불러오는 것 처럼
setNumber안에서 ( number + 1 ); 을 해주는 것이 아닌
setNumber ( prevCount =>prevCount + 1 ) 이런식으로 써준다.

그리고 클래스 컴포넌트에서는 state를 constructor안에서 state했기때문에 한번만 렌더링 되지만
위에서 한것처럼 useState( 여기 ) -->바로 여기서 state를 설정해주고 나면 함수가 호출될때마다 계속 렌더링됨으로 performance에 좋지 않은 영향을 미친다.

따라서 useState ( 초기 설정 값 )을 이렇게 바로 써주지 않고
useState ( ( )=> { return 초기설정값 } ) 이렇게 해주어야한다.

이걸 이해하기 쉽게 한번더 설명하자면 function countInitial ( ) { return 4 } 라는 함수를 만들었다고 가정하자. 그리고 useState ( countInitial( ) )
이런식으로 useState함수안에 바로 호출한다면 useState를 부를때마다 매번 countInitial함수가 계속 호출 될것이다. 이를 막기 위해 useState ( ( )=>countInitial( ) ) 이렇게 쓰면 한번만 호출 된다.

클래스 컴포넌트 처럼 객체에 많은 정보 담아서 보낼때 주의할 점

const [state, setState] = useState({ count : 4, color : 'blue' })
const count = state.count
const color = state.color

state에 초기화 될 key와 value가 묶여진 객체를 useState에 넣었다.
근데 setState를 통해 동적으로 데이터를 바꿀때 바꿀 key부분만 바뀌고
나머지 객체속에 남아있는 요소들과 merge 되는 클래스 컴포넌트와 달리!
useStateHook는 아예 객체안에 있는 모든 old state들을 over write해버린다.
따라서 이를 방지하기 위해서 다음과 같은 코드를 쓴다

function minusCount ( ) {
 setState( prevState => {
  return { ...prevState, count: prevState.count -1 }
 })
} 

...prevState 과거의 state( all the old values )를 spread out 해주고 콤마,
뒤에 뱌꿀 데이터를 업데이트 하면서 old value들을 전부 잃지 않고 가져가는 것이다.

만약 두 데이터를 객체로 전달하지 않고 만약 각각 다른 hook로 데이터를 다룬다면
위와 같은 걱정을 해줄 필요가 없다

const [count, setCount] = useState(4)
const [color, setColor] = useState('blue')

이렇게 완전 seperated된 두개의hook를 써준다음

밑에서 두개의 function으로 setCount( number + 1 ) / setColor('red') 이런식으로 변화를 주는 함수들을 각각 만들어주면 된다.

밑에 jsx
<span > { count } </span>
<div > { color } </div>

profile
front-end developer. key= "consistency"

0개의 댓글