리액트

스타일드 컴포넌트

• 스타일을 컴포넌트 범위로 한정하여 충돌을 방지할 수 있다
• props를 통해 전달받은 값으로 스타일을 동적으로 변경 가능하다
• 자바스크립트에서 바로 스타일을 넣을 수 있기 때문에, 페이지 로딩 시간이 단축된다

단점

• 스타일이 자바스크립트 코드에 내장되기때문에, 재사용할 수 없고, 가독성이 떨어질 수 있다
• 성능적인 장점은 있지만, 협업에 있어서 문제가 생길 수 있다(CSS 는 디자이너의 영역)

컴포넌트 생명주기

컴포넌트의 크게 세 가지 주요 단계로 나눌 수 있다

• 마운팅은 컴포넌트가 화면에 추가되는 과정이다
• 업데이트는 컴포넌트가 props 또는 state의 변경으로 재렌더링되는 과정이다
• 언마운트는 컴포넌트가 화면에서 제거되는 과정이다

함수형 컴포넌트

• 함수형 컴포넌트는 Hook을 사용하여 컴포넌트 생명주기에 간섭할 수 있다
• React의 클래스 기반 컴포넌트에서 생명주기 메소드(componentDidMount(), componentDidUpdate(), componentWillUnmount()) 들을 함수형 컴포넌트에서는 Effect를 이용하여 비슷하게 구현할 수 있다

useEffect 사용 방법

useEffect(setup, dependencies?)

매개변수

• setup: 컴포넌트가 DOM에 추가된 후, 실행할 함수
  - 마운트 된 후, 실행되기 때문에 부하가 걸리는 작업을 랜더링 이후로 미룰 수 있다
  - 선택적으로 cleanup function을 반환할 수 있다
  - cleanup function는 먼저 실행한 후, setup 함수를 실행한다
  - cleanup function 를 통해 이벤트 리스너나 타이머를 해제함으로써, 메모리 누수를 방지할 수 있다
• dependencies(선택사항): 코드 내부에서 참조되는 모든 reactive values의 배열
  - reactive values 는 props, state 및 컴포넌트 본체 내부에 직접 선언된 모든 변수와 함수를 포함한다
  - [dep1, dep2, dep3] 와 같은 배열 형식으로 작성한다
  - Object.is를 사용하여 이전 값과 비교하는데, 생략하면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행된다

예시

컴포넌트 마운트 시에만 실행하기

useEffect(() => {
...
},[]); // dependencies 배열이 비어 있으므로, 컴포넌트가 마운트될 때만 실행된다

특정 값이 변결될 때 실행하기

useEffect(() => {
...
},[count]); // count 값이 변경될 때마다 Effect가 실행된다

cleanup function을 포함하는 경우

useEffect(() => {
	let timer: NodeJS.Timeout;
	const fetchData = async () => {
		timer = setTimeout(() => {
		setDiscount(false);
		}, 3000);
	};
	fetchData();
	return () => {
		clearTimeout(timer); // useEffect 코드 실행 전에 항상 실행된다
	};
}, [discount]);

Ajax

서버로부터 더 많은 데이터를 가져오는 방법이다

• 기존 브라우저를 통해 데이터를 요청한다면, 페이지가 새로고침된다
• 새로고침 없이 데이터를 주고 받을 수 있게 해주는 기술이다

Ajax의 3가지 사용방법

• XMLHttpRequest 문법 사용
• fetch() 문법 사용
  • json() 메소드를 이용하여, JSON 문자열 형태의 응답 데이터를 JavaScript 객체로 변환할 수 있다
• 최신 라이브러리인 axios 사용

axios 사용 방법

import axios from 'axios';

axios.get('https://sample.com/data')
  .then(({data}) => console.log(data) // 응답 데이터를 자동으로 JSON 객체로 변환
  .catch(error => console.error('Error:', error));

텝 만들기

• React Bootstrap을 이용하여 텝 만들기
• 텝에 대한 정보를 보여주기 위해 컴포넌트 이용하기
• 텝의 상태변수에 따라 보여주는 내용 다르게 설정

const [tab, setTab] = useTab<number>(0); // 초기값 0 설정, 경우의 수 3가지이므로 0, 1, 2로 설정

<Nav variant="tabs" defaultActiveKey="link0">
	<Nav.Item>
		<Nav.Link onClick={() => setTab(0)} eventKey="link0">
			제품영양정보
		</Nav.Link>
	</Nav.Item>
	<Nav.Item>
		<Nav.Link onClick={() => setTab(1)} eventKey="link1">
			리뷰
		</Nav.Link>
	</Nav.Item>
	<Nav.Item>
		<Nav.Link onClick={() => setTab(2)} eventKey="link2">
			교환
		</Nav.Link>
	</Nav.Item>
</Nav>

interface TabContentProps {
	tab: number;
}

const TabContent: FC<TabContentProps> = ({tab}) => {
	return [
		<div>제품 영양 정보입니다</div>,
		<div>리뷰 관련 정보입니다</div>,
		<div>교환/반품 관련 정보입니다</div>,
	][tab]; // tab의 변수값에 따라 보여주는 값 다르게 설정
}

Context API

props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다

• 싱글 페이지 애플리케이션의 단점은 컴포넌트 간의 state 를 공유하기 어렵다는 것이다
• 보통 props를 이요하여 부모 컴포넌트에서 자식 컴포넌트로 state를 전달한다
• 위 방식으로는 여러 컴포넌트에서 state 를 공유하는 것이 번거롭고 불편하다
• Context API 나 Redux 를 이용하여 컴포넌트 트리 전체에 데이터를 제공할 수 있다

사용 방법

• stock 상태 변수를 사용하기 위한 하위 컴포넌트를 contextStorage.Provider 로 감싸준다
• contextStorage.Provider 에 하위 컴포넌트에 전달할 값을 설정해준다

// App.tsx

interface ContextValue {
	stock: number[];
	coffee: Coffee[];
}

export let contextStorage = createContext<ContextValue | undefined>(undefined); // 다른 곳에서 사용할 수 있도록 export 해준다

function App() {
	const [stock] = useState<number[]>([10, 11, 12]);
	...
	return (
		...
		<Route
			path="/detail/:id"
			element={
			<contextStorage.Provider value={{ stock, coffee }}>
			<Detail coffee={coffee}></Detail> // stock 상태 변수를 사용하기 위한 하위 컴포넌트를 contextStorage.Provider로 감싸준다
			</contextStorage.Provider>
			}>
		</Route>
	)
}

// Detail.tsx
import {useContext} from 'react'

const Detail: FC<DetailProps> = ({ coffee }) => {
	...
	const ctx = useContext(contextStorage);
	console.log(stx.stock); // [10, 11, 12]
}

장점

• props drilling 문제를 해결할 수 있다.
• 즉, 중간 계층의 컴포넌트들을 건너뛰고 직접 필요한 데이터를 하위 컴포넌트에 전달할 수 있어, 불필요한 props 전달로 인한 컴포넌트 간 의존성을 줄일 수 있다
• 해당 데이터에 의존하는 컴포넌트들이 특정 상위 컴포넌트와의 직접적인 의존성 없이 재사용될 수 있다

단점

• 100개의 컴포넌트가 데이터를 공유하고 있다면, 어떤 컴포넌트에서 데이터를 변경했을 때 모든 컴포넌트가 재렌더링된다
• Context API 를 재사용할 때마다 매번 import 해줘야한다
• 컴포넌트의 독립성과 재사용성에 영향을 줄 수 있다