[NextJS - 3] React - Adding Interactivity With State

이전 글에서 React의 Core Concepts인 Components와 Props에 대해 알아봤다. 
여기에서는 마지막 코어 컨셉인 State가 무엇인지, 
React가 State와 Event-Handler를 이용하여 어떻게 Interactivity를 높이고 있는지 알아보자.

 

---

 

Event-Handler

React에서 Event를 Listen하고 Hadling 하는 방법은 매우 간단하다. 

 

Listening to Events

function HomePage() {
  //    ...
  function handleClick() {
    console.log('increment like count');
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

위에서 만들었던 HomePage 컴포넌트 안에 button 을 하나 추가하고, click 이벤트를 들을 수 있도록 onClick속성을 button 태그에 추가 해주었다. 

 

• React에서 Event 이름은 항상 CamelCase를 사용한다(e.g. onClick, onChange, onSubmit, etc.)

 

Handling Events

그럼, click 이벤트가 발생 했을 때 어떻게 해당 이벤트를 처리 할 수 있을까?

handleClick이라는 함수를 선언하고, 이 함수를 onClick={handleClick} 과 같은 방식으로
onClick 이벤트가 발생하였을 때 hadnleClick 함수가 실행 되도록 만들 수 있다.

 

 

---

 

State

React는 hooks 이라고 불리는 함수들의 set을 가지고 있다. 

Hooks는 state와 같은 추가 기능?(로직)을 컴포넌트에 추가할 수 있도록 도와준다.

 

여기에서 State는 UI내에서 시간이 지남에 따라 변화하는 상태, 특히나 user insteraction에 의해 변화하는 상태를 의미한다.

state 의 사용 예시

 

이러한 state를 사용하여 해당 버튼이 몇 번 클릭됐는지를 알려주는 버튼 등을 만들 수 있다. 
그리고 이렇게 state를 관리하기위해 만들어진 Hooks(함수)가 바로 useState 이다.

 

 

useState

useState는 배열을 return 하기 때문에, destructuring을 통해 아래처럼 리턴 값을 받아 올 수 있다. 

function HomePage() {
  const [likes, setLikes] = React.useState(0);

  // ...
}

• useState 리턴 값(배열)의 첫 번째 아이템은 해당 state의 value이다. (예시에서는 클릭 횟수 가 될 것이다.)
• 두 번째 아이템은 첫 번째 아이템(value)을 업데이트하는 함수이다. naming에 특별한 rule이 있는 것은 아니지만, state value앞에 set이라는 prefix를 붙이는 방식이 일반적이다.(e.g. setLikes)
• useState 함수 인자로 전달된 값, 0, 은 likes의 initail value를 의미한다.

 

이제 아래처럼 버튼이 클릭 될 때 마다 좋아요가 1씩 증가하는 컴포넌트를 만들 수 있을 것이다. 

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

 

---

 

FYI, 
함수의 첫 번째 인자로써 컴포넌트 간에 전달되는 props와는 다르게, state는 컴포넌트내에서 초기화 되고, 저장된다.
state의 정보를 props로 자식 컴포넌트에 전달 할 수 있지만,
updating하는 로직은 반드시 state가 처음 created된 컴포넌트내에서 관리되어야 한다.

---

 

Props와 State의 차이점?

그렇다면 props와 state의 차이점은 무엇일까?

• Props: props는 자식 컴포넌트에 전달되는 읽기 전용(read-only) 데이터를 의미한다.
• State: 보통 user interaction을 통해 trigger되는 이벤트를 통해 시간이 지남에 따라 변화되는 데이터를 의미한다.

 

---

여기까지 State와 React에서 이벤트를 어떻게 다룰 수 있는지 간단히 알아보았다. 

State에 대한 자세한 내용을 알고 싶다면, 다음 링크를 참고하자.

• 리액트 공식참고링크

Adding Interactivity

• 리액트 공식참고 링크 2

Managing State

 

 

 

현재까지 어떻게 React를 이용하여 Application을 만들 수 있는지 정리해보았다. 

다음 글에서는 본격적으로 Next.js에 대해 알아보자.