[React] React 에서 state 사용해보기

💡 실습 포인트!

---

💜 React 에서 state 사용해보기

🤍 state 를 만들어서 데이터 저장해보기

• React 에서는 변수말고도 state 라는 것을 사용하여 데이터를 저장하여 사용할 수 있다.

• state 를 사용하기 위해서는 일단 state 를 사용할 파일 상단에 다음과 같이 코드를 넣어주어야 한다.

 let [value, setValue] = useState(initialValue)

• 그리고 useState() 함수는 위와 같은 형태로 사용한다.
• useState() 함수는 state 를 하나 만들어주는 함수이며, useState() 의 소괄호 안에 저장할 데이터를 넣으면 state 에 데이터를 저장할 수 있다.
• useState() 함수를 사용하면 array 의 형태로 [데이터1, 데이터2] 와 같이 데이터가 두 개가 남는데, 이는 구조 분해 문법을 활용해서 저장한 후 사용이 가능하다.
• value 는 getter 에 해당하며 실제 저장할 데이터가 들어있는 변수이고, setValue 는 setter 에 해당하며 저장할 데이터를 변경할 함수가 들어있는 변수이다.

---

🤍 state 데이터로 데이터바인딩하기

function App() {

  let [title, setTitle] = useState([
      '[React] React 설치와 개발환경 셋팅하기', 
      '[React] JSX 를 이용해 HTML 페이지 제작해보기'
  ])

  return (
    <div className="App">
      <div className="veryperi-nav">
        <div>
          <FontAwesomeIcon icon={faStarAndCrescent} /> Seoyun's Blog
          </div>
      </div>
        <h2 className='intro'>배움에서 가치를 찾는 예비 개발자입니다</h2>
        <div className='list'>
          <h3>{title[0]}</h3>
          <p>2022-03-18</p>
          <hr/>
        </div>
        <div className='list'>
          <h3>{title[1]}</h3>
          <p>2022-03-18</p>
          <hr/>
        </div>
    </div>
  );
}

export default App;

• 위와 같이 코드를 작성하면 title 이라는 변수에는 [ '[React] React 설치와 개발환경 셋팅하기', '[React] JSX 를 이용해 HTML 페이지 제작해보기' ] 라는 array 가 저장된다.
• 그리고 <h3>{title[0]}</h3> 와 같은 형태로 코드를 작성하면 데이터바인딩이 되어, 미리보기 화면에서는 <h3>[React] React 설치와 개발환경 셋팅하기</h3> 라고 코드를 작성한 것과 똑같이 렌더링되는 것을 알 수 있다.

• 또한, state 에는 원시자료형뿐만 아니라 Array, Object 자료형으로도 데이터들을 저장할 수 있다.

---

🤍 state 에 데이터를 저장해서 사용하는 이유 알아보기

• 데이터를 저장하는 방법에는 변수를 사용하는 방법이 있다.
• 그렇다면 굳이 state 에 데이터를 저장해서 사용할 필요가 있을까하는 의문이 생길 수 있다.
• 일반적으로 변수는 변경이 발생해도 자동으로 재렌더링을 해주지 않는다.
• 하지만 React 에서는 state 가 수정되면 state 가 포함된 모든 HTML 을 자동으로 재렌더링해준다는 특성이 있다.
• 따라서, 변수가 변경될 때 자동으로 관련된 HTML 을 재렌더링하도록 만들고 싶다면 state 에 데이터를 저장해서 데이터바인딩을 하는 것이 훨씬 용이하다.

---

💜 React 에서 state 변경해보기

📌 터미널 / 브라우저 콘솔창에 warning 메시지 안 나오게 하기

• 간혹 코드를 작성하다보면 터미널이나 브라우저 콘솔창에 노란색 글씨로 warning 메시지가 나오는 경우가 있다.
• 이는 eslint 가 잘못된 코딩관습을 교정해주는 것인데 보고 싶지 않다면 다음과 같이 코드를 작성하고 있는 파일의 최상단에 다음과 같이 주석을 추가해주면 된다.

/* esLint-disable */

---

🤍 title 옆에 추천 버튼(👍) 만들기

<h3>{title[0]}<span>👍</span> 0 </h3>

• 일단 기능을 만들기 전에 추천 버튼과 숫자가 어떤 식으로 화면에 나오게 할지 HTML 로 작성해본다.

• 적용하면 브라우저에서는 이런 식으로 UI 가 보여진다.

---

🤍 추천 버튼(👍) 클릭 시 숫자 카운트하기

• 현재 0 이라는 숫자로 하드코딩을 해둔 상태이므로 추천 버튼을 아무리 클릭해도 숫자는 변하지 않는다.
• 따라서, state 를 사용해서 추천 버튼을 클릭할 때마다 재렌더링하여 추천 버튼 클릭 수만큼 숫자가 올라가도록 HTML 을 다시 작성해주었다.

// useState() 함수 사용
let [thumbsUp, setThumbsUp] = useState(0);

• 먼저 useState() 함수를 사용하여 변수명을 정한 후, 초기값을 0으로 설정해주었다.

// JavaScript 
<div onclick="실행할 자바스크립트 코드"></div>

// React JSX
<div onClick={실행할 함수}></div>


// onClick 속성에 함수 작성하는 방법
// 예를 들어 함수의 이름이 cntThumbsUp 이라고 한다면 아래와 같이 3가지 방법으로 사용 가능
<div onClick={ cntThumbsUp }></div>
<div onClick={function(){실행할 코드}}></div>
<div onClick={()=>{실행할 코드}}></div>

• HTML 요소를 클릭했을 때 작성하는 코드는 위와 같이 JavaScript 와 React JSX 가 비슷하지만 조금 다르다.
  • onclick 대신 onClick 이라고 작성해야 한다.
  • 쌍따옴표(" ") 혹은 따옴표(' ') 대신 중괄호({ })를 사용해야 한다.
  • 일반적인 코드를 작성하는 게 아니라 함수 형태로 코드를 작성해주어야 한다. 

<h3>{title[0]}<span onClick={ ()=>{ thumbsUp + 1 } }>👍</span> {thumbsUp} </h3>

• 추천 버튼(👍)을 클릭할 때마다 thumbsUp 의 숫자가 1씩 증가해야 한다.
• 간단하게 생각했을 때, thumbsUp + 1 해주면 된다.
• 그렇다고 해서 일반적인 변수를 사용하는 것처럼 위와 같이 코드를 작성하면 아무런 반응이 없다.
• state 는 일반적인 변수와는 달리 값을 변경할 때 지정된 변경 함수를 사용해야 하기 때문이다.
  (네! 바로 그거요..값을 변경할 때 사용하려고 남겨두었던 setThumbsUp..)

<h3>{title[0]}<span onClick={ ()=>{ setThumbsUp(thumbsUp + 1) } }>👍</span> {thumbsUp} </h3>

• setThumbsUp 이라고 만들어 놓은 변수가 thumbsUp 이라는 state 를 변경하기 위한 함수에 해당한다.
• 따라서, 위와 같이 setThumbsUp(thumbsUp + 1) 로 작성하여 기존의 thumbsUp 데이터를 대체할 데이터인 thumbsUp + 1 로 대체해주면 된다.