1. State

State가 왜 필요할까?

• 지금까지 저희가 실습/과제로 만든 웹 페이지는 ‘정적 웹페이지’라고 볼 수 있어요.
• 1주차에서 React를 사용하는 이유 중 하나가 바로 DOM을 이용해 동적 웹페이지를 쉽게 관리할 수 있다는 점이었어요.
• 이번 주부터는 유저 인터랙션에 따라 페이지를 다르게 구성할 수 있는 동적 웹페이지를 만들어 볼거에요.
• 이 동적 웹페이지를 만들기 위해 React에서 필요한 개념이 바로 state에요.

State 사용 예시

아직 State가 뭔지, 어떻게 사용하는 건지 감이 잘 잡히지 않으실 거에요. 당연합니다! 그래서 저희가 많이 사용하는 SAINT를 예시로 State에 대해 이해해 볼게요.

• 노란색 탭 부분을 클릭하면 화면에 어떤 변화가 일어나나요?
• 웹 페이지의 URL이 바뀌지 않고, 유저가 클릭한 탭에 맞는 내용을 보여주는 것을 확인할 수 있어요.
• URL이 바뀌지 않았다는 점에서
  • 새로운 페이지로 이동한 것이 아니라
  • 동일한 화면에서 HTML 요소만 바뀌었다는 것을 확인할 수 있어요.
• 이런 페이지를 동적 웹페이지라고 한다고 했었죠?

SAINT의 탭을 코드로 어떻게 구현할까?

위의 화면에서 사용되는 기본적인 로직을 한 번 코드로 구현해 볼게요.

function NoStatePage() {
  let user_choice = '일반공지';
  console.log(user_choice);
  return (
    <div>
      유저 선택: {user_choice}
      <br />
      <button onClick={() => (user_choice = '일반공지')}>일반공지</button>
      <button onClick={() => (user_choice = '학사공지')}>학사공지</button>
      <button onClick={() => (user_choice = '종합봉사실 공지')}>종합봉사실 공지</button>
    </div>
  );
}