React에서 State란?

React에서 State란?

 

지금까지 React의 Component, Props, Event에 대해 알아보았다.

 

이전 글

2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기

2023.06.19 - [JS] - React Props에 대해 알아보자. Component에 데이터 보내기

2023.06.20 - [JS] - React에서 Event 처리 어떻게 할까?

 

이번에는 React에서 State 라는 개념을 알아볼 것이다.

 

React에서 State란?

React에서 Event에 의해 변경되는 동적인 값이다.

 

state 관련 기능을 사용하기 위해서 먼저 react library에서 {useState} 를 import 시킨다.

 

App 컴포넌트에 동적으로 변경되는 값을 다루기 예제를 작성해보자.

 

mode라는 변수에 State를 사용한다고 선언한다.

const [mode, setMode] = useState('assign-value');

React state가 적용된 mode 변수를 선언하는 방식이

기존 javascript 변수 할당 방식과는 조금 다른 것을 확인할 수 있다.

 

위 문법이 React에서 특정 변수에 state를 사용하는 방법이니 외워야 한다.

 

mode를 state로 사용하고,

 

Header 컴포넌트의 onChangeMode 이벤트 함수에 alert() 인자로 mode를 넣어서

mode에 세팅된 값이 alert 되도록 수정한다.

위에서 mode와 같이 선언된 setMode는 mode의 값을 변경할 때 사용한다.

 

그럼 두 번 Header 제목을 클릭하면 alert 메시지가 'WELCOME'이 아닌 'Hello'를 띄우게 된다.

이렇게만 보면

순수 javascript랑 다를 게 없어 보인다.

 

그런데,

특정 변수의 값이 변경될 때 화면 reload 없이 변경되도록 처리한다고 할 때

javascript만으로 구현하기란 쉽지 않은 일이다.

 

React의 state를 사용해 구현하면 쉽게 구현할 수 있게 된다.

 

App 컴포넌트 코드를 수정해 보자.

 

Header와 Nav의 메뉴 list 클릭 이벤트에 따라 mode state가 변경되도록 처리했다.

다음 mode state에 따라서 Article 컴포넌트를 다르게 보여주는 코드를 작성한다.

mode state에 따라서 content 변수에 Article 컴포넌트를 title 속성과 body 속성이 다른 값으로 할당하고,

컴포넌트를 배치한다. {content}

 

Header를 클릭했을 때는 Article에

"Welcome, Hello, WEB"이 보이지만,

Nav의 list 메뉴를 클릭했을 때 Article에

"Title, Body"가 보이는 것을 확인할 수 있다.

 

 

반응형

 

mode state에 따라서 화면을 동적으로 다르게 처리할 수 있다는 것을 학습했다.

이제 Nav 컴포넌트의 메뉴 list를 선택할 때마다 알맞은 Article이 화면에 보이도록 코드를 수정한다.

 

Nav 컴포넌트에서 id 값을 세팅하는 함수가 있는데 이 부분을 숫자로 세팅되도록 수정했다.

 

 

App 컴포넌트 수정

function App() {
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  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') {
    let title, body = null;
    for(let i = 0; i<topics.length; i++) {
      console.log(topics[i].id, id);

      if(topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }

    content = <Article title={title} body={body}></Article>
  }

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

export default App;

우선 App 컴포넌트에 id state를 추가했다.

그리고 Nav에서 메뉴 클릭 시 id state를 세팅하는 코드를 추가했고,

현재 id state 값과 topics의 id 값이 일치하는 title, body를 Article 컴포넌트에 전달하도록 했다.

 

Nav의 메뉴 list 클릭 시 id 값이 다시 세팅이 되면서

변경된 화면의 렌더링이 다시 이루어진다.

따라서 화면 reload 없이 Nav의 메뉴 list 클릭 시

Article이 변경되는 것을 확인할 수 있다.

 

React에서는 event에 의해 동적인 state 변수에 대해

변경이 감지되면 수정된 부분을 다시 렌더링 하여

변경된 화면을 보여준다.