6. state

 

https://www.youtube.com/watch?v=vmunrKR0uOU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=7

 

1. state의 개념

컴포넌트는 입력은 prop이고 이것을 우리가 만든 함수에서 처리해서 return값을 만들면 이 return 값이 새로운 ui를 만든다.

prop과 마찬가지로 return 값을 바꾸는 변수가 바로 state 이다.

 

2. prop과 state의 차이점

props은 컴포넌트를 사용하는 외부자를 위한 데이터

state는 컴포넌트를 만드는 내부자를 위한 데이터

 

3. state 사용법

3-1. mode 값 바꾸기

mode 라는 변수를 통해서 'Welcome' 이라는 문구와 'Read' 라는 문구를 띄우고 싶다.

Header를 클릭하면 mode를 'WELCOME' 으로, Nav를 클릭하면 mode를 'READ'로 바꾸고 싶다.

function App() {
  const mode = 'WELCOME';
  const topics = [
    {id:1, title:'html', body:'html os ...'},
    {id:2, title:'css', body:'css os ...'},
    {id:3, title:'js', body:'js os ...'},
  ]
  let content = null;
  if(mode === 'WELCOME') {
    content = <Article title="Welcome" body="Hello, WEB"></Article>
  } else if(mode === 'READ') {
    content =  <Article title="Read" body="Hello, Read"></Article>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        mode = 'WELCOME';
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        mode = 'READ';
      }}></Nav>
      {content}
    </div>  
  );
}

하지만 위 코드대로 하면 원하는 대로 동작하지 않는다.

그 이유는 mode의 값을 바꾸긴 했지만 App 함수가 다시 실행되지 않기 때문에 return 값이 변하지 않은 것이다.

내가 하고 싶은 것은 mode의 값이 바뀌면 컴포넌트 함수가 새로 실행되면서 새로 return 값이 나오고 ui가 바뀌는 것을 하고 싶다.

이럴 때 state를 사용한다.

 

mode 변수를 state로 업그레이드 하기 위해서

import {useState} from 'react';
// ... 
const _mode = useState('WELCOME');

이렇게 해주면 된다.

 

하지만 오류가 발생한다.

console.log를 통해 _mode를 보면

console.log(_mode);

0번 인덱스에 내가 지정한 "WELCOME"이 있고, 1번 인덱스에 함수가 들어있다.

 

useState는 배열을 리턴한다.

배열의 0 번째 원소는 상태의 값을 읽을 때 쓰는 데이터, 1 번째 원소는 상태의 값을 변경할 때 사용하는 함수이다.

  const _mode = useState('WELCOME'); //상태를 만듬
  const mode = _mode[0]; //_mode를 통해서 상태의 값을 읽어옴
  const setMode = _mode[1]; //1 번째 원소인 setMode를 통해서 mode의 값을 바꿀 수 있다는 규칙이 있다.

그래서 위 코드처럼 사용해서 값을 읽어오고, mode값을 바꿔주는 함수를 만들어서 사용한다. 

하지만 코드가 복잡해서 다음과 같이 코드를 작성한다.

const [mode, setMode] = useState('WELCOME');

이 한 줄이 위에 3줄과 같은 의미를 가진다.

 

이제 state를 사용하려면

//...
return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode('WELCOME'); //mode 값 변경
      }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode('READ'); //mode 값 변경
      }}></Nav>
      {content}
    </div>  
  );
}

이렇게 하면 된다.

 

3-2. Nav 클릭 시 id 값 바꾸기

id 값에 따라 출력하는 내용이 바뀌게 하고 싶다.

id 값을 변경하는 법도 mode와 동일하다.

const [id, setId] = useState(null);
//...
<Nav topics={topics} onChangeMode={(_id)=>{
        setMode('READ');
        setId(_id);
      }}></Nav>

id와 setId를 만들어주고, Nav 태그 안에 setId를 넣어서 id값을 바꿔주면 된다.

하지만 이렇게 하면 제대로 동작하지 않는다.

그 이유는 id값이 숫자가 아닌 문자로 넘어가기 때문이다. 

Nav 함수 내부에 입력한 값은 숫자지만, 이를 태그의 속성으로 넘기면 문자가 된다. 그래서

props.onChangeMode(event.target.id);

props.onChangeMode(Number(event.target.id));

 

event.target.id에 문자를 숫자로 컨버팅해주는 Number()를 씌워주면 id값이 숫자로 바뀌면서 정상적으로 동작하게 된다.