[React] useState 정리

 

useState – React

🗯️ 공식 문서

const [state, setState] = useState(initialState)

매개변수

• initialState:
  • state의 초기 설정값입니다.
  • 어떤 유형의 값이든 지정할 수 있지만 함수에 대해서는 특별한 동작이 있습니다.
  • 이 인수는 초기 렌더링 이후에는 무시됩니다.
  • 함수를 initialState로 전달하면 이를 초기화 함수로 취급합니다.
  • 이 함수는 순수해야 하고 인수를 받지 않아야 하며 반드시 어떤 값을 반환해야 합니다.
  • React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장합니다.
    
    

반환값

• useState는 정확히 두 개의 값을 가진 배열을 반환합니다.

1. 현재 state입니다.
   1. 첫 번째 렌더링 중에는 전달한 initialState와 일치합니다.
2. 상호작용에 반응하여 state를 다른 값으로 변경하고 리렌더링을 촉발할 수 있는 set 함수입니다.

💗 useState가 반환하는 set 함수를 사용하면 state를 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있습니다. 여기에는 다음 state를 직접 전달하거나, 이전 state로부터 계산한 함수를 전달할 수도 있습니다.

 

주의!

set 함수를 호출해도 이미 실행 중인 코드의 현재 state는 변경되지 않습니다.

function handleClick() {
  setName('Robin');
  console.log(name); // 아직 "Taylor"입니다!
}

set함수는 다음 렌더링에서 반환할 useState에만 영향을 줍니다.

 

 

🐊 참고 코드

총정리

1. useState를 import 한다

    import { useState } from 'react';

 

 

2. useState를 작성한다.

const[반환값1, 반환값2**(set 함수)**]= useState(초기값)

 

3. 이제 set함수를 활용해보자 

const onClick=()=>{ 
set함수(활용할 식) 
}

 

4. return 영역에서 활용 

return ( 
  <button onClick={onClick}> 
    {반환값1} 
  </button> 
  )

*반환값2(set함수)가 돌아가면 거기에 따라 반환값1 리렌더링

 

---

const [name, setName] = useState('Edward');
const [age, setAge] = useState(28);

function handleClick() {
  setName('Taylor');
  setAge(a => a + 1);
  // ...

 

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

function App(){
      // const는 불변 let은 가변
      // useState()활용할 때, 
      // 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수
      let [counter,modifier]=React.useState(0);
      const onClick = () => {
        // 함수 괄호에 뭐 만들건지 쓰기만 하면 됨
        modifier(counter+1)
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick} >Click me</button>
        </div>
      );
    }
    
    // root라는 id를 가진 div 요소에 React 컴포넌트를 렌더링
    ReactDOM.render(<App/>, root);

function App(){
    const[showing, setShowing] = useState(false);
    const onClick=()=> setShowing(prev=>!prev);

    return (
    <div>
        {showing ? <Hello /> : null}
        <button onClick={onClick}>{showing ? "Hide" : "show"}</button>
    </div>
    )
}