React

Nested Routes

중첩 라우트로, 자식 Route를 가지는 부모 Route의 path 뒤에 다른 경로가 더 붙는다는 뜻으로 /*(와일드카드)를 붙여줘서 해당 Route 내부에서 또다른 Route가 렌더 될 수 있음을 명시한다.

<Routes>
    <Route path="/" element={<Coins />} />
    <Route path="/:coinId/*" element={<Coin />}>
      <Route path="chart" element={<Chart />} />
      <Route path="price" element={<Price />} />
    </Route>
  </Routes>

:coinId/chart와 :coinId/price의 라우팅을 네스티드 라우츠 방식으로 구현한 것이다.

Styled-Components

JS 내에서 스타일을 지정할 수 있는 방법이다.

// 선언
let BlueBtn = styled.button`
    background: blue;
    color: white;
    padding: 20px;
  `
  
//사용

<BlueBtn>팀버튼</BlueBtn>

장점

• JSX(TSX) 파일 내에서 스타일을 지정할 수 있다
• 해당 컴포넌트에서만 사용되서 오염이 안된다
• 페이지 로딩시간 단축
• props를 이용해 다양한 스타일 구현 가능

단점

• JS내에서 내장되어 있으므로, 가독성은 다소 떨어짐
• 협업에도 어려움이 생길 수 있음
• 실무에서는 잘 사용하지 않음

UseEffect와 훅

컴포넌트 생명 주기

• Mount
• Update
• Delete

useEffect

useEffect는 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할수 있게 만들어주는 Hook이다.

useEffect(() => {
	실행할 코드
}, []);

• useEffect의 마지막 배열이 생략되면 리랜더링 될 때마다 해당 코드가 실행된다.
• useEffect의 마지막 배열에 요소가 없으면, 가장 처음 mount 되었을 때만 실행된다.
• useEffect의 마지막 배열에 요소가 있으면, mount 되었을 때와, 해당 값이 변경될때마다 실행된다.
• return을 넣어주면, clean-Up function으로 버그를 방지할 수 있다.

Ajax

Asynchronous Javascript And XML라는 뜻으로, 서버에 요청 시 새로고침 없이 데이터를 주고 받을수 있게 도와준다.

사용방법

• XMLHttpRequest 문법 사용
• fetch 문법 사용
• axios 최신 외부 라이브러리 사용

Context API

리액트 프로젝트 내에서 전역적으로 사용할 수 있는 변수를 위해 사용하는 문법으로, 컴포넌트가 지나치게 중첩되어 있어, 프롭스를 전달하는 과정이 복잡해지면 Context API나 Redux같은 상태관리 툴을 이용하여 편리하게 사용할 수 있다.