리액트 컴포넌트는

[입력 : prop] 된 데이터를 함수가 처리해

[출력 : return] 값을 통해 새로운 UI를 만듦

• state : 컴포넌트 함수를 다시 실행해 새로운 return 값을 만들어주는 데이터

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

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

function App() {
  const mode = "WELCOME";
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'},
  ]
  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의 값이 바뀌면 App 컴포넌트 함수가 새로 실행되어 새로운 리턴 값을 받아 UI에 반영하기

⇒ state 사용

*사용법

1. import {useState} from 'react'; // useState 훅 이용 (react에서 제공하는 기본적인 함수)

• 2. const [mode, setMode] = useState('WELCOME');
• • useState ⇒ 배열을 리턴