[React] 예시 4. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가하기(상태 설정)

https://print-blue.tistory.com/191

[JavaScript ] 예시 1. 순수한 자바스크립트 페이지

https://print-blue.tistory.com/193

[React] 예시 2. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸기

https://print-blue.tistory.com/194

[React] 예시 3. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고 이벤트 기능 추가

 

이전 포스팅에서 좋아요 버튼이 구현이 되었으니 거기에 상태 설정을 한 다음

좋아요 버튼 클릭시 이미지가 추가 되는 기능을 만들 거다 !

script 영역

H1

const H1 = (props) => {
  return <h1>상품 {props.children} 페이지</h1>
}

 

Form

핸들러가 추가 되었다 !

const Form = ({handlerFormSubmit}) => {
  return (
    <form action="" onSubmit={handlerFormSubmit}>
      <input type="text" name="name" placeholder="상품명을 입력하세요"/>
      <button type="submit">추가</button>
    </form>
  );
}

 

MainCard

const MainCard = ({img, handlerHeartClick}) => {
  return (
    <div className="main-card">
      <img 
        src={img} 
        alt="올리브 오일" 
        width="400"
      />
      <button onClick={handlerHeartClick}>🤍</button>
    </div>
  );
}

FoodItem

const FoodItem = ({img}) => {
  return (
    <li> 
      <img 
        src={img} 
        alt="음식"
        style={{ width : '150px', height : '100px', backgroundSize : 'contain' }}
      />
    </li>
  );
}

Favoritse

App 부분에 구현이 되어야 되는데 미리 설명하자면,

img 가 여러 개인 경우 보통 배열 형태로 관리를 하는데 반복문을 활용해서 가져오면 된다 !

for 문이 아닌 forEach 와 map 중 사용해야되는 건 map ! 

왜냐면 forEach 는 실행 후 return 이 되지 않지만, map 은 return 이 되니까 map 으로 써야함 !

 

근데 key는 뭘까 ?

만약 key 를 지정안했으면 콘솔창에 react.development.js:199 Warning: Each child in a list should have a unique "key" prop

이라고 뜰거다 

이 내용은 만들어진 값이 똑같기 때문에 구분을 해줘야 한다는 뜻으로 나중에 값을 삭제할 때 구분이 안되기 때문에 key 값을 지정하라는 뜻이다 

 

현재 key 값으로 경로로 넣어줬는데 이건 좋은 방법이 아니지만 연습하고 있는 거니까 그냥 넣어줌 !

const Favorites = ({ favorites }) => {
  return (
    <ul className="favorites">
      {favorites.map(food => (<FoodItem img={food} key={food} />))}
    </ul>
  );
}

App

App 에서 이렇게 구현된 것은 상태 끌어올리기(lifting state up) 라고 표현된다 ! 

아까 위에서 말했듯 img 가 여러 개인 경우 배열 형태로 관리한다고 했는데, 코드에서도 배열 형태로 관리했다.

 

코드를 보면 주석에 상태값 설정이 있는데 

자바스크립트 함수인 useState 를 통해 컴포넌트에서 바뀌는 값을 관리한다.

지금까지 리액트 컴포넌트를 만들 때 동적인 부분이 하나도 없어 값이 바뀌는 일은 없었는데,

사용자 인터랙션에 따라 바뀌어야 할 때 상태값 설정을 한다.

 

const App = () => {
  const foodOne = "img/food-one.jpg";
  const foodTwo = "img/food-two.jpg";
  const foodThree = "img/food-three.jpg";
  const [favorites, setFavorites] = React.useState([foodOne, foodTwo]);

  const [counter, setCounter] = React.useState(1);
  console.log('핸들러 상위 영역 counter 출력', counter);

  function handlerFormSubmit(event) {
    event.preventDefault();
    console.log('추가 버튼 클릭');

    // [상태값 설정] ==============================
    // 핸들러 내에서 상태값 변경
    // handlerFormSubmit() 실행 후 아래 코드가 실행이 되기 때문에
    // 저장된(반영된) 값은 항상 그 전 값이라는 것을 인지해야함 !!!! (순서가 있다는 것 !)
    setCounter(counter + 1);

    // [상태값 확인] ===============================
    // console.log('couterState :', counterState);
    console.log('핸들러 내 counter 출력', counter);
  }

  function handlerHeartClick() {
    console.log('하트 클릭 !');
    setFavorites([...favorites, foodThree]);  
  }

  return (
    <div>
      <H1>{counter}</H1>
      <Form handlerFormSubmit={handlerFormSubmit}/> 
      <MainCard 
        handlerHeartClick={handlerHeartClick} 
        img="img/food-one.jpg"
      />
      <Favorites favorites={favorites} />
    </div>
  );
}

 

const foodLiInsert = document.querySelector('#food-li-insert');
ReactDOM.createRoot(foodLiInsert).render(app);

 

하면 끝날 줄 알았는데 error 가 생긴다 !

그 이유는 react 컴포넌트 함수로 정의하면서 컴포넌트를 사용하여 ui 를 구성할 때 JSX 문법을 사용해서 작성해야되기 때문에 아래 코드 처럼 바꿔줘야 한다 ! 그럼 끝 !!

const foodLiInsert = document.querySelector('#food-li-insert');
ReactDOM.createRoot(foodLiInsert).render(<App />);

 

 

https://velog.io/@jaychang99/React-%EC%9D%98-useState-%EB%BF%8C%EC%8B%9C%EA%B8%B0

React 의 useState 뿌시기

https://react.vlpt.us/basic/07-useState.html

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook