웹 풀사이클 데브코스 TIL [Day 54] - 리액트 Effect와 prop drilling

JaeKyung Hwang·2024년 2월 6일

Prop Drilling TIL ajax styled components tab useEffect 교육생 국비지원교육 수강후기 코딩부트캠프 프로그래머스 데브코스

프로그래머스 웹 풀사이클 데브코스 TIL

목록 보기

54/85

2024.02.06(화)

📑Bootstrap 탭 UI

Navs > tabs

Tab.Container를 사용하지 않으면 Nav.Link마다 onClick으로 Tab의 상태를 update해주고 해당 state에 따라 tab content를 보여주는 코드를 작성해야 함

import { Nav, Tab } from 'react-bootstrap';

const [activeTab, setActiveTab] = useState('tab1'); // 초기 탭 설정

return (
    <Tab.Container activeKey={activeTab} onSelect={key => setActiveTab(key ?? "tab1")}>
        <div>
            <Nav variant="tabs" defaultActiveKey="tab1">
                <Nav.Item>
                    <Nav.Link eventKey="tab1">제품 영양 정보</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="tab2">리뷰</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="tab3">교환</Nav.Link>
                </Nav.Item>
            </Nav>
        </div>
        <div>
            <Tab.Content>
                <Tab.Pane eventKey="tab1">
                    <h1>제품 영양 정보입니다.</h1>
                </Tab.Pane>
                <Tab.Pane eventKey="tab2">
                    <h1>리뷰 관련 정보입니다.</h1>
                </Tab.Pane>
                <Tab.Pane eventKey="tab3">
                    <h1>교환/반품 관련 정보입니다.</h1>
                </Tab.Pane>
            </Tab.Content>
        </div>
    </Tab.Container>
);

Tabs

import { Tab, Tabs } from 'react-bootstrap';

return (
    <Tabs
        defaultActiveKey="tab1"
        className="mb-3"
    >
        <Tab eventKey="tab1" title="제품 영양 정보">
            <h1>제품 영양 정보입니다.</h1>
        </Tab>
        <Tab eventKey="tab2" title="리뷰">
            <h1>리뷰 관련 정보입니다.</h1>
        </Tab>
        <Tab eventKey="tab3" title="교환">
            <h1>교환/반품 관련 정보입니다.</h1>
        </Tab>
    </Tabs>
);

💅Styled Components

설치: npm install styled-components 🔗

페이지 로딩시간 단축 (js 파일 내에서 정의하고 바로 사용하기 때문)

import styled from 'styled-components';

const Button = styled.button<{ $primary?: boolean; }>`
  /* Adapt the colors based on primary prop */
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);

함께 설치하면 좋은 Extension: vscode-styled-components

✨Effect

🧐 Effect 왜 사용할까?

Hook은 React 버전 16.8부터 추가된 React 요소 → 기존 class 기반의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능 사용 가능
component의 life cycle
Effect는 함수형 component에서 component의 life cycle을 관리(mount, update, unmount 시 특정 작업 수행)하기 위해 사용
이 때 사용하는 useEffect Hook은 React class 기반 component에서의 life cycle method(componentDidMount, componentDidUpdate, componentWillUnmount)와 유사한 역할을 수행하며, 하나의 API로 통합된 Hook

🪝`useEffect` Hook 사용법

import { useEffect } from 'react';

useEffect(setup, dependencies?)

setup: 수행할 function
- cleanup function을 return 가능 (optional)
- cleanup function은 (제공된 경우) useEffect의 코드가 실행되기 전에 실행됨
dependencies(optional): reactive value(dependency)들의 배열
- dependency들은 Object.is 비교를 통해 이전 값과 비교됨
- 배열 안의 값들이 변경될 때마다 re-render 후에 Effect가 실행됨⭐
  - dependeny 배열을 사용하지 않는 경우
    - component가 render될 때마다 실행됨
```
useEffect(() => {
  // ...
}); // Always runs again
```
  - dependency에 빈 배열을 전달하는 경우
    - 처음 render(mount)될 때에 딱 한번만 실행되고 이후에는 실행되지 않음
```
useEffect(() => {
  // ...
}, []); // Does not run again (except once in development)
```
return 값 없음 (undefined)
리액트는 기본적으로 rendering 이후에 Effect를 실행 → 오래걸리는 작업은 useEffect의 setup에 넘겨서 일단 화면을 먼저 보여주고 계속 작업하도록 할 수 있음!

📡AJAX

서버에 요청 시 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 기술

XMLHttpRequest 문법 사용 (옛날 방식)

fetch 문법 사용 (사용자가 명시적으로 response 객체를 json() method를 사용하여 변환해주어야 함)

fetch('https://api.example.com/data')
  .then(response => response.json()) // JSON으로 파싱
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

최신 외부 라이브러리 axios 사용 (자동으로 response 객체를 변환해줌) ✅

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data)) // 이미 JSON 형식으로 파싱된 데이터
  .catch(error => console.error('Error:', error));

설치: npm install axios 🔗

🤔Props의 문제점

보통 우리는 상위 component에서 하위 component로 정보를 전달할 때 함수의 매개변수처럼 props를 사용하게 된다.
- component 계층 구조가 깊어질수록 전달 과정에서 중간에 많은 component들을 거쳐야 하는데 이런 패턴을 prop drilling이라고 한다.
- 중간에 props를 사용하지 않는 component도 거져가야하기 때문에 비효율적일뿐만 아니라 props 추적도 어려워지고 유지보수도 어려워진다..
우리가 전역 변수를 사용하여 어떤 함수에서든 쉽게 접근하여 사용하는 것처럼, React에서도 전역변수의 기능을 하는 게 있으면 좋을 것!
그렇게 해서 나온 기능 중 하나가 Context API로, Context를 사용하면 부모 component에서 사용 가능한 정보를 props를 통하지 않고도 모든 하위 component에서 사용할 수 있다!!
- 사용법은 공식 문서 참고
- 근데 context 요소를 수정하면 context를 사용하는 모든 component가 re-render될 뿐만 아니라 context를 import해서 useContext로 사용하는 등 dependency가 있다보니 사용하기가 좀 귀찮아 진다.
- 그래서 우리는 Redux를 사용!