React

04. State 변경하기

망재이 2024. 9. 4. 22:46

서론

** 실습 코드 보완
▶ 어제 진행했던 실습 문제 코드를 보완해보도록 하겠다.
 
let [[title1, title2, title3], b] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);


위처럼 title1, title2, title3 이렇게 쓸 필요없이 array 이므로 title[0], title[1], title[2]로 사용하면 훨씬 깔끔한 코드를 짤 수 있다. 그리고 <ul> 태그를 쓴 부분은 굳이 이렇게 쓸 필요가 없을 것 같아 <div>로 수정해줬다.

let [title, b] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);

  return (
    <div className="App">
      {/* 상단메뉴 만들기 */}
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      {/* 블로그 글 리스트 만들기 */}
      <div className="list">
        {/* 좋아요 갯수 생성 */}
        <h4>{title[0]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );

 

 

본론

onClick 사용하기!

 

좋아요 버튼을 눌렀을 때 숫자가 증가하는 기능을 배워봤다. 사용자가 웹 페이지를 클릭했을 때 사용자와 웹페이지가 상호작용할 수 있는 이벤트를 onClick이라고 한다. 일반 Html 파일에서는 <div> 태그 안에 onclick = "실행할 자바스크립트"를 넣어주면 되는데 JSX에서는 조금 다르게 표현한다.

 

1. Click을 대문자로

2. "" 대신 {} 중괄호 사용

3. 그냥 코드가 아니라 함수를 넣어줘야 잘 작동

 

let [like, updateLike] = useState(0);

<div className="list">
  {/* 좋아요 갯수 생성 */}
  <h4>{title[0]} <span onClick={ }>♥️</span>{like}</h4>
  <p>2월 17일 발행</p>
</div>

 

좋아요는 하트 이모티콘을 넣어 표현했고 좋아요 숫자의 경우는 계속 변동하는 데이터이므로 state를 이용해 표현해줬다.

 

그러면 onClick안에 함수를 어떻게 넣어주면 될까?

기본적으로 함수는 아래와 같은 형태로 표현한다. 함수 이름을 지정해주고 중괄호 안에 해당 함수를 호출했을 때 실행할 코드를 짜준다.

function 함수() {console.log(1);}

 

onClick={} 안에 함수를 넣는 방법은 다양하다.

 

먼저, 위 코드처럼 함수식을 별도로 작성해놓고 onClick 중괄호 안에 함수명을 입력해줘도 좋고,

<div onClick={함수}> 좋아요 </div>

 

일회용으로 쓰고 말 함수라면 굳이 함수명을 만들어 별도로 작성하지 말고 중괄호 안에 바로 실행 코드를 넣어도 된다.

<div onClick = {function() {console.log(1)}}> 좋아요 </div>;

 

혹은 () => {} 코드를 이용하여 훨씬 깔끔하게 작성할 수도 있다.

<div onClick = {() => {console.log(1)}}> 좋아요 </div>;

 

 

State 변경하기! (매우중요)

 

 

그렇다면 state는 어떻게 변경하면 좋을까? 좋아요 버튼을 눌렀을 때 좋아요 숫자를 1 증가하게 만드려면 like = like + 1이라고 생각하기 쉽다. 보통 변수를 이용할 때는 이렇게 짜기 때문이다. 하지만 state는 '='을 사용해서 코드를 작성해놓으면 html이 재렌더링 되지 않는다. state는 state 변경함수를 써서 state를 변경해야 한다. 처음 state의 기본개념에 대해 학습했었을 때 let [a, b] = useState()라고 작성했었다. 이때 a는 이름, b는 함수라고 배웠는데 이 b가 바로 state 변경을 도와주는 함수이다.

함수(변경된state)

 

위처럼 사용하면 되는데 {} 안에 있는 값으로 state를 변경하는 함수라고 생각하면 된다. 따라서 좋아요를 눌렀을 때 숫자가 1 증가한 값을 state에 넣고 싶으면 like + 1을 중괄호 안에 넣어주면 된다. 아래 코드의 updateLike 함수 괄호 안에 변경하고 싶은 state 값인 like + 1를 넣어주면 하트를 누를 때마다 옆에 있는 숫자가 하나씩 증가한다!

function App() {

  let [title, changeTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [like, updateLike] = useState(0);

  return (
    <div className="App">
      {/* 블로그 글 리스트 만들기 */}
      <div className="list">
        {/* 좋아요 갯수 생성 */}
        <h4>{title[0]} <span onClick={()=>{updateLike( like+1 )}}>♥️</span> {like} </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

 

 

정리

1. 클릭했을 때 무언가 실행시키고 싶으면 onClick = {함수} 이벤트 핸들러 사용

2. state를 변경할 때는 state 변경함수 이용하기! 꼭!

  → state 변경함수는 ( ) 안에 입력한 걸로 기존 state를 변경시켜준다.

 

더보기

** 실습

글 목록 옆에 버튼을 하나 생성하고 버튼 클릭시 '남자코트 추천' 에서 '여자코트 추천'으로 변경하기

 

가장 고민을 했던 부분이 좋아요와 다르게 제목은 array로 이루어져 있어서 첫번째 글 제목만 변경할 때 어떤 식으로 변경해야 할지 많이 고민했다. 좋아요 숫자 변경처럼 간단하게 진행하려고 하지말고 함수를 따로 생성해서 차근차근 진행해보기로 했다.

setTitle() 함수를 생성해줬는데 title 배열 중 제일 첫번째 값을 '여자코트 추천'으로 변경해주고 state 변경함수를 이용해 기존 state 값을 변경해주도록 생성했다.

 

이때 사용한게 spread이다. 만약 changeTitle(title)이라고 명시한다면 글자가 변경되지 않을 것이다. 왜냐하면 state는 기존 state와 신규 state의 값을 비교했을 때 둘이 같을 시 값을 변경하지 않는다. 그런데 기존 state === 신규 state는 true가 나오기 때문에 위처럼 명시하면 값이 변경되지 않을 것이다. 그래서 사용한 것이 spread문법인데 값을 공유하지 않고 복사하기 때문에 값 변경이 제대로 일어날 수 있다.

function App() {

  let [title, changeTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [like, updateLike] = useState(0);

  function setTitle() {
    title[0] = '여자코트 추천';
    changeTitle([...title]);
  }

  return (
    <div className="App">
      {/* 상단메뉴 만들기 */}
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      {/* 블로그 글 리스트 만들기 */}
      <div className="list">
        {/* 좋아요 갯수 생성 */}
        <h4>{title[0]} <span onClick={()=>{updateLike( like+1 )}}>♥️</span> {like} <button onClick={setTitle}>change</button> </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

 

728x90