React 좋아요 버튼 만들면서 state 공부

📌  구현 결과

 

 

📌  구현 과정

 

App.js

 

✔ /* eslint-disable */  

npm 눌렀을 때 뜨는 노란 글씨 ( 오류는 아니지만 약한 경고 메세지 ) 를 지워주는 역할

 

✔ 리액트는 데이터 바인딩이 굉장히 쉽다

 

데이터의 상태를 변화시키고 싶을 때, useState를 사용해 복사해 온 다음에 변경 사항을 적용시킨다.

절대 !! 원본 데이터는 직접 변경시키지 않는다. 꼭 복사해서 들고 올 것.

 

// 01
const changeName = () => articleNameChange(["백엔드개발자" ,"자바스크립트", "리액트"])

// 02
const changeName = () => {           
  const newArr = [...articleName];
  newArr[0] = "백엔드개발자";
  articleNameChange(newArr);
}

 

✔ 값을 '공유'하지 말고 '깊은 복사'를 해서 가져오자

 

둘 다 똑같이 state를 변화시켰지만 그 과정 속에서 데이터를 다루는 방식의 차이가 있었다. 

되도록이면 02번 방식처럼 데이터를 복사해서 수정하는 형식을 따르자.

 

 

✔ state를 잘 관리하는 게 관건이다

 

이 조그만 컴포넌트 안에서도 state가 3개나 존재한다. 제목 state, 날짜 state, 좋아요 숫자 state.

그리고 이 state들을 관리하는 함수들도 3개 이상 존재할 것이다. 제목 변경 함수, 날짜 변경 함수, 좋아요 숫자 변경 함수 등등

지금으로서는 좋아요 숫자 변경 함수가 재활용성이 높아보인다. 어느 버튼에 들어가서도 똑같은 역할을 수행하기 때문이다.

제목이나 날짜 변경은 useState 연습했다고 생각하자 :)

 

 

✔ { BrowserRouter, Switch, Route, Link }

 

다른 페이지로 이동할 수 있게 하는 아이들이다.

컴포넌트 별로 path를 설정하고, 지정된 버튼과 Link를 연결해 버튼을 클릭했을 때 해당 path로 이동시켜주는 아이다.

일단 사용법은 나중에 !!

 

 

App.css