React state(hook) /

 

state

prop을 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 return값을 만들면, 그 return값이 새로운 ui가 된다.

prop가 함께 컴포넌트 함수를 다시 실행해서 새로운 return값을 만들어주는 데이터가 있는데, 이것을 state라고 함

 

prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 만듦.

 

prop vs state (차이점)

- prop: 컴포넌트를 사용하는 외부자를 위한 데이터

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

 

hook

function App() {
  const mode = "Welcome"; //이 부분
  const topics = [
    {id:1, title:'html', body:'html is ...!'},
    {id:2, title:'css', body:'css is ...!'},
    {id:3, title:'JS', body:'JS is ...!'},
  ]
  let content = null; // 이 부분
  if (mode === 'Welcome'){
    content = <Article title="Welcome" body="hi, react~ my name is lena!"></Article>
  } else if (mode === 'Read'){
    content = <Article title="Read" body="hi, react~ my name is nayoung"></Article>
  }
  return (
    <div>
      <Header title="Web" onChangeMode={()=>{ // === function(){}
        mode = 'Welcome'; //이 부분
      }}>
      </Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        mode = 'Read'; //이 부분
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

우리가 하고 싶은 것: mode의 값이 바뀌면, 컴포넌트 함수가 새로 실행되면서 새로운 return값이 만들어지고,

그 return값이 ui에 반영되는 것을 원함 (but, ↑ 위의 코드로는 반영되지 않음 ㅎㅎ)

 

이때 필요한 것이 useState → hook은 react에서 기본적으로 제공되는 함수이다.

 

↑ 위의 mode는 일반적인 지역변수인데, 이를 state, 즉, 상태로 업그레이드 시킬 것 → useState(); 활용

useState의 인자는 그 state의 초기값

 

0: welcome = 값 (상태의 값을 읽을 때 쓰이는 데이터)

1: function = 함수 (상태의 값을 변경할 때 사용하는 함수)

→ 즉, mode의 값을 변경하고 싶으면 1(function)을 이용해 바꿔주면 된다.

  const _mode = useState('Welcome');
  const mode = _mode[0];
  const setMode = _mode[1];
  
  // 위의 코드와 아래 코드는 같습니다~ (많이 쓰이는 것이 아래의 코드)
  
  const [mode, setMode] = useState('Welcome');

 

 

우리가 입력한 값은 문자였지만, <a> tag 속성을 만나면서 문자열로 바뀐다.

때문에 우리는 이 값을 문자에서 → 숫자로 바꿔주기 위해서 number()함수를 이용해 convert 해준다!

 

ㅇ