[DAY-48] React (1)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
이제 좀 친해지나 싶었지만 뷰는 떠나갔습니다... 흑흑

기다리고 기다리던 리엑트 시작입니다!
처음에 실습을 시작하고 구조가 한 눈에 잡히지 않아 힘들었습니다.
하지만 타이핑을 하다보니.. 비슷하네요?!

꼭 잘 학습해서 프로젝트에 녹여내겠습니다.

[1] React

React는 facebook에서 나온 프론트엔드(자바스크립트) 라이브러리입니다.

[1-1] 특징

• Reactive Programming

React는 Reactive Programming을 지원합니다.

즉 상태를 관찰하고 변화가 발생할 경우, 연관된 곳에서 다시 연산이 수행됩니다.

• View

또한 React는 MVC 아키텍쳐 패턴 중 View만을 관리하는 라이브러리입니다.

또한 컴포넌트의 조합으로 View를 구성합니다.

• Virtual DOM

Virtual DOM을 지원합니다.

필요한 부분만 한 번에 렌더링하므로, 별다른 최적화 없이 빠른 성능을 낼 수 있습니다.

하지만 일반적으로 DOM을 직접 생성하는 것 보다는 느립니다.

따라서 성능보다는 개발 편의성을 위해 Virtual DOM을 채택했음을 알 수 있습니다.

[2] 리엑트 어플리케이션

create-react-app을 사용하여 react-app을 생성할 수 있습니다.

npx create-react-app my-app

npm start

[2-1] 표현식

표현식은 다음과 같이 작성할 수 있습니다.

function App() {
  const name = "지영";

  return (
    // 이와 같이 Javascript 파일 내에서 html 가상 돔을 포함하는 형태를 JSX라고 부릅니다.
    // javascript 내에서 class가 예약어기 때문에 className을 이용합니다.
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React with {name} // 이렇게 표현식을 작성합니다.
        </a>
      </header>
    </div>
  );
}

[2-2] 조건문

조건부 렌더링에도 해당 표현식을 사용할 수 있습니다.

또한 주로 삼향 연산자도 많이 사용됩니다.

// 표현식 사용
{
  showLink && (
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React with {name}
    </a>
  );
}
// showLink가 true일때만 해당 a 태그가 렌더링됩니다.

// 삼향 연산자 사용
{
  showLogo === "show" ? (
    <img src={logo} className="App-logo" alt="logo" />
  ) : (
    <h1>오잉</h1>
  );
}

[2-3] 반복문

반복해서 렌더링을 하기 위해서는 map함수를 사용합니다.

즉 VanillaJS의 반복 렌더링 구문을 표현식 안에서 작성할 수 있습니다.

<ul>
  {names.map((item) => {
    return <li key={item}>{item}</li>;
    // 반복문에서는 반드시 key를 적어줍니다.
    // react의 성능 최적화를 위함입니다.
  })}
</ul>

[3] 컴포넌트란?

리엑트 컴포넌트는 여러 로직을 담을 수 있으며, 상태를 가집니다.

컴포넌트는 트리 구조로 서로 데이터와 메세지를 주고 받을 수 있습니다.

이때, 데이터는 상위에서 하위로 (단방향)으로 흐릅니다.

컴포넌트는 재사용이 가능한 형태로 설계하는 것이 좋습니다.

이를 위해서는 UI를 추상적으로 바라보는 관점이 필요합니다.

또한 리엑트의 컴포넌트는 함수로 이루어져 있습니다.

컴포넌트는 Props라는 객체를 받아서 함수 내의 로직을 거쳐 JSX를 반환합니다.

[3-1] 컴포넌트 구조

컴포넌트는 주로 src/components 안에 선언합니다.

컴포넌트의 이름으로 폴더를 생성하고, index.js로 함수를 작성합니다.

// Logo Component (index.js)
import logo from "./logo.svg";
import propTypes from "prop-types"; // props의 타입을 지정해줍니다.

function Logo({ size = 200 }) {
  return (
    <img
      src={logo}
      className="App-logo"
      alt="logo"
      style={{ width: size, height: size }}
    />
  );
}

Logo.propTypes = {
  size: propTypes.number,
};

export default Logo;

// App.js
import "./App.css";
import Logo from "./components/Logo";

function App() {
  return (
    // 해당 컴포넌트의 이름으로 태그를 생성하여 사용합니다.
    <div className="App">
      <header className="App-header">
        <Logo size={100} />
        <Logo />
		// ...
	);
}

[4] 분기와 반복

컴포넌트는 위에서 살펴봤듯이 JSX를 반환하는 ‘함수’입니다.

함수 내에서 JSX를 처리하는 과정에서 분기와 반복을 사용할 수 있습니다.

JSX 내에서 if와 for와 같은 문법 사용이 어렵기 때문에

편의를 위해 삼향연산자, 논리곱 연산자와 map, filter와 같은 고차 함수를 이용합니다.

[5] 이벤트 바인딩

[5-2] 이벤트 바인딩

컴포넌트의 이벤트 바인딩은 간단합니다.

사용할 함수를 선언하고, 이벤트 바인딩을 할 수 있습니다.

// Counter Component 일부
const [count, setCount] = useState(0);

const handleIncrease = () => {
  setCount(count + 1);
  if (onIncrease) {
    onIncrease(count + 1);
  }
};

const handleDecrease = () => {
  setCount(count - 1);
  if (onDecrease) {
    onDecrease(count - 1);
  }
};

return (
  <div>
    <span>{count}</span>
    <br />
    <button onClick={handleIncrease}>+</button>
    <button onClick={handleDecrease}>-</button>
  </div>
);

[5-3] 부모 컴포넌트 메세지 전달

props를 통해서 메세지를 전달할 수 있습니다.

가장 간단하게 함수를 전달해서 받을 수 있습니다.

이때, 각 하위 컴포넌트들의 상태와 부모 컴포넌트의 상태는 서로 간섭하지 않습니다.

// App Component 일부
<Counter
  onIncrease={(count) => {
    setTotalCount(totalCount + 1);
  }}
  onDecrease={(count) => {
    setTotalCount(totalCount - 1);
  }}
/>

이 방법 외에도 다양한 방법이 있습니다.

추후에 정리하도록 하겠습니다!

[6] 훅

[6-1] useState 훅

컴포넌트의 지역 상태 관리에는 useState를 사용합니다.

useState는 값이 변경되면 다시 렌더링을 합니다.

React에서 상태란 동적인 데이터를 말합니다.

useState를 사용하면 상태의 기본값을 파라미터로 넣어 해당 함수를 호출해줍니다.

함수가 호출되면 첫번째 원소가 현재 상태, 두번째 원소가 Setter 함수인 배열이 반환됩니다.

import { useState } from "react"; // 리엑트 패키지에서 불러와 사용합니다.
import "./App.css";

function App() {
  const [visible, setVisible] = useState(false);
// 배열 비구조화 할당을 통해 해당 코드처럼 작성할 수 있습니다.

<button onClick={() => setVisible(!visible)}>Toggle</button>

setVisible(Setter) 함수를 사용하여 첫번째 원소인 현재 상태를 업데이트해줄 수 있습니다.

[6-2] useEffect 훅

useEffect 훅은 무언가 변화가 있을 때 감지하여 반응하는 훅입니다.

useEffect(() => {
  console.log("Change totalCount!");
}, [totalCount]);
// totalCount의 값이 변할 때 마다 안의 로직이 실행됩니다!

만약 뒤의 배열에 아무 값도 넣지 않았을 땐, 컴포넌트가 처음으로 로드될 때만 실행됩니다.

이 경우는 스크롤 이벤트와 같이 전역적으로 변화를 감지해야 할 때 주로 사용합니다.

useEffect(() => {
  const handleScroll = () => {
    console.log(window.scrollY);
  };

  document.addEventListener("scroll", handleScroll);
  return () => document.removeEventListener("scroll", handleScroll);
}, []);

주의해야 할 점은, 해당 컴포넌트가 사라져도 이벤트가 남아있지 않게
return 문에 함수를 넣어줌으로써 꼭 이벤트를 삭제해줘야 합니다.

[6-3] useRef 훅

useRef는 DOM에 직접 접근할 때와 지역변수로 사용할 때 두 경우에 사용할 수 있습니다.

useRef는 값이 변경되더라도 다시 렌더링을 하지 않습니다.

[1] DOM 접근

const inputRef = useRef();

<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>
// 해당 버튼을 누르면 useRef로 접근한 input Dom 요소의 포커스가 잡히게 됩니다.

특정 Component의 DOM에도 접근할 수 있습니다.

이 경우 forwardRef를 사용합니다.

// Input Component
import React from "react";

const Input = React.forwardRef((_, ref) => {
  return (
    <>
      Input: <input ref={ref} />
    </>
  );
});

export default Input;

// App Component 일부
<Input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>

[2] 지역변수

다시 렌더링하지 않을 지역 변수를 선언할 때 사용할 수 있습니다.

// AutoCounter Component 일부
const [count, setCount] = useState(0);
const intervalId = useRef();

const handeleStart = () => {
  intervalId.current = setInterval(() => {
    setCount((count) => count + 1);
  }, 1000);
};

const handleStop = () => {
  clearInterval(intervalId.current);
};

[7] 페이지네이션

보통 서버 측에서 페이지를 분할해서 보내주곤 합니다.

하지만 클라이언트 측에서 페이지네이션을 구현하는 경우도 적지 않습니다.

// Pagenation Component 일부
// defaultPage (맨 처음 선택될 페이지)
// limit (한 페이지 당 보여줄 article의 갯수)
// total (전체 article의 갯수)
// onChange (하위 -> 상위 컴포넌트로 페이지가 바뀜을 알려주는 함수)
const Pagination = ({ defaultPage, limit, total, onChange }) => {
  const [page, setPage] = useState(defaultPage);
  const totalPage = Math.ceil(total / limit);

  const handleChangePage = (newPage) => {
    onChange(newPage);
    setPage(newPage);
  };

  return (
    <div>
      <button onClick={() => page !== 0 && handleChangePage(page - 1)}>
        이전
      </button>
      {Array.from(new Array(totalPage), (_, i) => i)
        .filter((i) => {
          if (page < 3) {
            return i < 5;
          } else if (page > totalPage - 3) {
            return i >= totalPage - 5;
          }
          return i >= page - 2 && i <= page + 2;
        })
        .map((i) => (
          <button
            key={i}
            onClick={() => handleChangePage(i)}
            style={{ backgroundColor: page === i ? "aqua" : undefined }}
          >
            {i + 1}
          </button>
        ))}
      <button
        onClick={() => page + 1 !== totalPage && handleChangePage(page + 1)}
      >
        다음
      </button>
    </div>
  );
};

VanillaJS와 로직이 유사합니다. 겁먹지 말고 공부해봐야겠어요..!

---

출처

프로그래머스

React.js Document