Chap5. 리액트 State 및 이벤트 다루기

5.1 : Chap5에선 무엇을 배우는가?

이때까지는 정적인 애플리케이션을 구축 했었다.
상태는 늘 그대로, 출력도 그대로인것은 우리가 보통 원하는것이 아닐것이다.
그래서 이번 Chap5에서는 인터랙티브 앱을 구축하여 사용자의 클릭과 사용자가 입력한 데이터에 대응하고 어떤 일이 발생하면 그에 따라 바뀌는 반응형 앱을 만들것이다.

• 사용자 이벤트 처리하는 법 ( 이벤트 핸들러를 어떻게 추가하는지 )
• 화면에 표시되는 내용을 바꾸는 방법과 상태를 다루는 방법
• 컴포넌트와 상태에 대한 자세한 내용
  
  
  
  

5.2 : 이벤트 수신 및 이벤트 핸들러로 작업

평소에 이벤트 리스너를 만드는 방식은
document.getElementById('root').addEventListener()
이런 방식을 사용 했을것이다.

리액트에서는 JSX 코드에서 on으로 시작하는 프로퍼티로 간단하게 사용이 가능하다. ex) onClick
on으로 시작하는 프로퍼티를 추가하였다면 그 프로퍼티에 대한 행위(함수)를 정의해주기만 하면 된다.

const App = () => {
  const clickHandler = () => {
   console.log("하이");
  }
return (
   <button onClick={clickHandler}></button>
  );
}

날짜 아래에있는 작은 버튼을 클릭할때마다 “하이”가 출력하게 된다.

5.3 : 컴포넌트 함수가 실행되는 방법

App.js

const App = () => {
  let money = 10000;
  const clickHandler = () => {
  money = 9000;
}

return (
   <p>${money}</p>
   <button onClick={clickHandler}>할인쿠폰 적용</button>
);
}

위 코드의 실행 결과는 다음과 같다.

할인 쿠폰을 클릭하면 할인이 적용되어 9000원인 화면으로 상태변화 하는것을 원한다. 하지만 위의 코드로는 반응도 없고 바뀌지 않는다.
왜냐하면 위 코드는 상태변화를 시키기위한 리액트가 작동하는 방식이 아니기 때문이다.

리액트에서 모든 컴포넌트는 (App.js도 마찬가지로) 단지 JSX 를 사용하는 일반적인 함수인데, 이러한 컴포넌트들은 평가할 JSX 코드가 없을때까지 모두 리턴한다.
다시말해 index.js 파일에서 시작해서 화면이 로딩되어 호출이 시작하고 모든 컴포넌트를 실행하며 화면에 표시하는 방식인데, 중요한것은 이것을 반복하지 않는다.

즉 위 코드의 money같은 일반 데이터 변수들은 재평가를 하지 못하며 리액트도 신경쓰지 않는다. 변수가 바뀌어도 컴포넌트 함수를 다시 실행하지 않는다는 것이다.

그럼 컴포넌트 함수를 다시 실행시켜야지만 재평가가 가능할것 같은데..
그렇다면 특정 컴포넌트만 재평가시켜 상태를 다시 보여주는 방법은 없을까??

5.4 :“State"와 함께 일하기

특정 컴포넌트만 재평가시켜 상태를 다시 보여주는 방법은 “UseState“ 를 사용하자.

사용하는 방법

• react에서 UseStae 라이브러리를 가져와야한다.
  => import React, { useState } from 'react';
• 사용하고자하는 컴포넌트 함수안에만 UseState를 호출이 가능하다.
  (컴포넌트 함수 밖에는 되지 않는다. )

사용예시
App.js

import React, {useState} from 'react';
const App = () => {
  const [ money , setMoney]= useState(100);
  const clickHandler = () => {
   setMoney(90);
}

return (
   <p>${money}</p>
   <button onClick={clickHandler}>할인쿠폰 적용</button>
);
}

useState는 초기값을 인자로하여 배열을 리턴하고 상태 변화할수 있게끔 한다.
const [ 상태 값 저장 변수 , 상태 값 갱신 함수 ] = useState(초기값);

const [ money , setMoney ] = useState(100);
위 코드를 빌려 설명하면
1. useState 함수를 호출하고 초기값은 100 입니다.
2. 상태 값 저장 변수의 변수명은 money 입니다. ( 이 money는 초기값 100 )
3. 상태 값 갱신 함수의 함수명은 setMoney 입니다.

• 상태 값 갱신 함수의 함수명을 명명할때 “set + 상태값 저장 변수명(첫문자는 대문자)”로 사용하는 경우가 관용적으로 사용된다.

그 후에 이벤트 핸들러를 통해서 상태 값 갱신 함수를 호출( setMoney(인자) )하여 업데이트 하고싶은 인자값을 같이 넣어주면 상태 값 저장 변수가 해당 인자값으로 변경된다.

이런식으로 상태 업데이트 함수를 사용하면 비로소 상태를 초기화한 컴포넌트 함수를 재실행한다!!!
중요한점은 이 컴포넌트 함수만 해당이 된다는것이 중요하다. 다시말해 상태가 등록된 컴포넌트만 함수를 재실행한다.


이때 짚고 넘어가야 하는 한가지가 있다.
아래 코드의 콘솔창의 실행결과를 예측해보자.
App.js

const App = () => {
  const [ money , setMoney]= useState(100);
  const clickHandler = () => {
   setMoney(90);
   console.log(money); 
}

콘솔로그 코드의 실행 결과는 90이 아니라 100이 나온다.
왜냐하면 상태 업데이트 함수를 호출하면 값을 즉시 바꾸는것이 아니라 상태 업데이트를 예약하기 때문이다. 추후 컴포넌트가 재평가되고나서야 업데이트된 값을 볼 수 있다.

5.5 : useState Hook 자세히 살펴보기

아래 사진은 Change Title 버튼을 누를때 해당 Title의 제목을
“다른제목으로 바뀌었음”으로 바꾸는 useState를 이용한 사진이다.

첫번째 라인의 버튼과 세번째 라인의 버튼을 각각 눌렀더니 해당하는 라인의 제목만 “다른제목으로 바뀌었음”으로 바뀌었다.
누르지 않은 다른 라인은 그대로인 모습을 볼 수 있다.
즉 상태는 컴포넌트 인스턴스별로 구별된다.
해당하는 인스턴스의 버튼을 누르면 해당되는 인스턴스의 내용만 바뀌고 다른 인스턴스의 내용은 바뀌지 않는다는 것이다.

5.5.1 : 왜 useState 함수를 사용할때 상수키워드를 사용하는가?

const [ , ] = useState( );
여기서 왜 상수 키워드인 const를 사용했을까?
=> 우리가 직접 변수 자체를 보는일이 없기 떄문이다. 리액트가 뒷단에서 해야할 일이며 상태를 관리하는 리액트에서 fetch로 가져온다.

“const [ , ]= useState( );” 이 useState를 쓰는 순간부터 리액트가 최신 상태관리를 담당하는것이다. 그래서 직접 개발자가 변수를 바꿀일이 없으므로 상수 키워드를 사용하는것이 적절하겠다.

5.5.2 : useState의 초기값은 계속 실행이되는가?

const [ , ] = useState( 초기값(♧) );
한번 useState가 실행되었던 해당 컴포넌트가 상태변화에 의해 또 실행된다면
해당 초기값으로 상태를 다시 초기화하는가??
=> 아니다. 해당 상태가 이전에 초기화된 적이 있다는 사실을 깨닫고 상태 업데이트를 기반으로 하는 최신 상태만 확인해서 그것을 우리에게 되돌려준다.
즉 초기값은 해당 컴포넌트 함수가 주어진 인스턴스에 대해 처음으로 실행되는 때에만 고려된다.