💪 React. Hooks w/ 진유림 님

[meɪ]·2022년 2월 2일

1-3. Today I Learned. React.js

목록 보기

9/9

Preface

📌 개발 공부 6개월 차인 to-be 개발자의 자습 blog🙂ﾠMMM DD ~ DD, YYYY

현재 상태
HTML부터 React까지 강의를 반복해서 들었는데, 그 중 나에겐 마치 phase 1의 끝판왕같은 React를 아주 쉽게 설명해 주는 강의를 찾은 것 같아 remind할 겸 수강해보았다.

➕ afterthought

강의 내용 중 "'함수랑 component랑 무슨 상관이지?'라고 생각하실 수도 있는데요."라는 부분에 감동(?)...!
처음 React를 머리에 넣을 때 (배운 거 아니고 넣어야 했으니...Ő▽Ő) 앞서 배운 JS나 DOM 이런 것들이 정리되어 있지 않다 보니 알고 보면 보이는 그 연결고리를 깨닫지 못했다.
'함수로 어떻게 동작을 만든다는 건지' 한동안 이해하지 못해 힘들었던 날들이 떠오른다.

P.S. 진유림 님은 강의 마지막 부분에서 CRA를 사용하신다.

link to 🛼

※ 목표 : body에 동적인 기능 구현하기

1. 기본 개념

1) 동적인 동작을 React가 아닌 JavaScript로만 할 때

// 🎵 고양이 사진에 있는 heart 모양 button을 누르면 이 button이 다른 모양으로 바뀌고 <li /> 하위에 해당하는 고양이 사진을 추가하기
// (1)
<body>
  <script>
  // STEP 1. 좋아요 button 찾기
  const likeButton = document.querySelector(".main-card button");
    // STEP 2. 좋아요 button에 click event 부여하기
    likeButton.addEventListener("click", function () {
      // STEP 3. 좋아요 button을 click했을 때 button 변경하기
      likeButton.innerHTML = "😍";
      // STEP 4. 좋아요 한 고양이를 추가할 곳 찾기
      const favorites = document.querySelector(".favorites");
      // STEP 5. 새로운 고양이 사진 만들기 = <img src="">
      const newFavoriteImage = document.createElement("img");
      newFavoriteImage.src = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
      // STEP 6. 고양이 사진을 감싸는 li tag 넣기 = <li> <img> </li>
      const li = document.createElement('li');
      // STEP 7. li tag에 고양이 사진 넣기
      li.appendChild(newFavoriteImage);
      // STEP 8. 좋아요 한 고양이를 추가할 곳에 방금 만든 요소를 넣기
      favorites.appendChild(li);
    });
  </ script>
</body>

JavaScript으로 기능도 구현하고 내용도 그려내야 하는데 그 문법이 복잡하고 비효율적이다.

2) 동적인 동작을 React로 할 때

// 🎵 고양이 사진에 있는 heart 모양 button을 누르면 이 button이 다른 모양으로 바뀌고 <li /> 하위에 해당하는 고양이 사진을 추가하기
// (2)
<body>
  // STEP 2. 고양이 사진을 넣어줄 공간 만들기
  <div id="app"></div>

  <script>
    // STEP 1. <li / >로 고양이 사진을 감싸기
    const catItem = (
       <li>
          <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
       </li>
    );
    // STEP 3. 고양이 사진을 그릴 위치인 app 찾기
    const 여기 = document.querySelector("#app");
    // STEP 4. React를 사용해서 catItem을 "여기"에 그리기 (render)
    ReactDOM.render(catItem, 여기);
	</script>
</body>

이렇게만 하면 <script /> 내에서 HTML 문법을 쓴 거라서 오류가 나므로
('Uncaught SyntaxError: Unexpected token'<'' : '꺽쇠 모양은 내가 모르는 token인데?'라는 의미의 JavaScript error가 남)
세 가지 script 관련 링크를 추가하고 script의 type을 "text/babel"로 변경해야 한다.

// 👇
// 🎵 React의 source code 추가하기
<body>
  <div id="app"></div>
    // STEP 1. React library의 source code 추가
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin></script>
    // STEP 2. React DOM library의 source code 추가
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin></script>
    // STEP 3. Babel code 추가
    <script
	  src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    // STEP 4. <script>의 type 변경
    <script type="text/babel"> 
      const catItem = (
        <li>
          <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
        </li>
      );

      const 여기 = document.querySelector("#app");
      ReactDOM.render(catItem, 여기);
    </script>
</body>

JavaScript로만 구현하는 것보다 React로 하는 것이 <script />에서도 HTML 문법을 쓸 수 있기 때문에 code가 더 직관적이고 깔끔하다.

이렇게 하면 <script /> 내에서 JS로 쓸 때보다 쉬운 HTML 문법을 쓰고도 HTML에 있는 <div id="app"></div>에 img가 그려지게 할 수 있다.

Babel은 일종의 통역사 ('compiler'로 표현하고 있음) 이다.
내가 편하게 적은 JSX 문법을 browser가 이해할 수 있게 JavaScript로 바꿔 준다. ('Get browser-compitable JavaScript out') .
내가 적은 React 구문을 (const catItem ~ ReactDom.render 부분) Babel sited에서 확인해 보면 React로 작성한 code가 browser의 언어로 변경되어 있는데, 이는 개발자도구에서 head tag안에 새로 생긴 <script />에서도 확인할 수 있다.
e.g. React.createElement("img", ...)
Babel 덕분에 browser가 내 code를 이해할 수 있는 것이다.

함수에 component를 넣는 법

// 🎵 {name}과 {introduction} component를 함수에 넣기
function Profile(name, introduction) {
  return (
    <div>
      <h2>{name}</h2>
      {introduction}
    </div>
  );
}

Profile("Ian", "개발 잘 하고 싶다."); // <div /> element에 있는 name 자리에 "Ian", introduction 자리에 "개발 잘 하고 싶다."
Profile("Mai", "나도 언젠가 Typescript 하고 싶다."); // <div /> element에 있는 name 자리에 "Mai", introduction 자리에 "나도 언젠가 Typescript 하고 싶다."

// ↓ 위처럼 함수를 호출하듯 쓰지 않고 tag처럼 쓸 수도 있음

<Profile name ="Ian" introduction = "개발 잘 하고 싶다." />
<Profile name = "Mai" introduction = "나도 언젠가 Typescript 하고 싶다." />

상태를 작성할 때

// 🎵 1씩 증가하는 상태 만들기
const counterState = React.useState(1); // 인자로 들어간 1은 초기값임
const counter = counterState[0]; // useState의 첫 번째 상태 (counterState[0]) 는 counter 그 자체이고
const setCounter = counterState[1]; // useState의 두 번째 상태 (counterState[1]) 는 counter를 조작한 setCounter

// ↓ 

const [counter, setCounter] = React.useState(1);
console.log("카운터", counter);

2. 기능 구현 코드 예시

하트를 누르면 세 번째 사진이 favorites에 추가되는 기능

// STEP 1. favorites의 상태가 변하므로 state를 추가하고 초기값 설정 const [favorite, setFavorites] = React.useState([CAT1, CAT2]);
// STEP 2. mainCard에서 하트를 눌렀을 때 `function handleHeartClick(){}`이 되도록 호출해야 하는데, 이 함수가 자식 component에 있으므로 부모 component인 const App으로 이동
// STEP 3. 부모 component에서 function handleHeartClick(){}에 `setFavorites`를 설정
// STEP 4. MainCard는 {handleHeartClick}을 props로 받아서 버튼의 onClick에 적용

<body>
	<div id="app"></div>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin></script>
    <script
	  src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">

      const MainCard = ({ img, handleHeartClick }) => {
        return (
          <div className="main-card">
            <img src={img} alt="고양이" width="400" />
            <button onClick={handleHeartClick}>🤍</button>
		  </div>
        );
      };

      const App = () => {
        const [favorites, setFavorites] = React.useState([CAT1, CAT2]);
        function handleHeartClick() {
          setFavorites([...favorites, CAT3]);
          // setFavorites([...favorites, CAT3]) = setFavorites([CAT1, CAT2, CAT3])
        }
        return (
          <div>
            <MainCard img={mainCat} handleHeartClick={handleHeartClick} />
            <Favorites favorites={favorites} />
          </div>
        );
      };

      const 여기 = document.querySelector("#app");
      ReactDOM.render(<App />, 여기);

    </script>
</body>