프로그래머스 스프린트3

프로젝트 생성 CRA vs Vite 🎯

스프린트3가 시작되었다! 그 첫 시간은 리액트 앱을 생성하는 것 부터 시작이다.

먼저, 가장 유명한 프로젝트 생성 방법인 CRA와 Vite를 비교해보자

CRA

CRA
React팀이 추천하는 공식 보일러 플레이트
빌드툴-webpack(made by node.js)
express server
source build
process.env.KEY
HMR

Vite

Vite
빌드툴-ESBuild(made by Go)
koa server
module build
import.meta.env.KEY
HMR

vite는 테스트 모듈제공 x (조금 더 가볍다.)
cra는 테스트 모듈제공 O

CRA vs Vite 비교 글

앞으로 진행할 프로젝트 폴더 구조 📚

프로젝트 폴더(디렉토리)구조
pages(page jsx 코드)
components(공동 컴포넌트,header,layout등 )
utils(포멧함수등)
hooks(React hook)
model(interface등)
api(fetcher함수)

React CLI명령어 🎯

npm run build

-> React는 간단하게 서빙을 할 수 있는 SPA

npm run test

package.json에 직접적으로 명령어를 넣어줄수있다.

tsc?
typescript compile명령어

컴파일중에 type 오류를 발견할 수 있다.

noEmit=> 출력하는 부분을 비활성화하겠다.(js로변환하는 과정은 생략하겠다.)
skipLibCheck=> 외부 라이브러리는 타입체크안하겠다.

레이아웃 왜 필요할까 🧐

1. 프로젝트의 기본적인 화면 구조를 잡는다.
2. 반복적으로 들어가야 하는 헤더, 푸터등을 매 화면마다 제공한다.
3. 상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비한다.

global style 왜 필요할까 🧐

1. 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링 적용
2. 브라우저간의 스타일 차이를 그복하기 위해 사용

대표적인 reset 방법 3가지

1. reset css => 굉장히 오래됐고 많이쓰임 대신 h1,h2,h3모두 같아짐
2. normalize.css => h1, h2의 차이를 다르게하면서 리셋. 즉 엘리먼트의 속성을 유지하면서 리셋한다.
3. sanitize.css

styled-component

css-in-js 중 대표적인 css 라이브러리

1. 전역충돌막기
2. 의존성 관리 어려움
3. 불필요한 코드, 오버라이딩
4. 압축(css코드가 Js코드에 들어가니 압축됨)
5. 상태 공유 어려움
6. 순서와 명시도
7. 캡슐화

Context API를 통해 Theme Swicher 🎯

Context API: context를 사용하면 단계마다 일일이 props를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

예시를 보면 Context API의 장점을 한 눈에 볼 수 있다.

Context API 사용 예시

Props로 데이터 전달

function App(){
  const theme = "light"
 return (
 <div>
  <Detail theme={theme}/>   
  <Home theme={theme}/>
 </div>
 ) 
}

function Detail(props){
  
 return (
 <div>
     <h1>{props.theme==="light" ? 밝음 : 어두움}</h1>    
 </div>
 )
}

//또 Home 컴포넌트에서 Props를 받아와서 사용

Context API로 데이터 전달

const ThemeContext = React.createContext("light")
//여기 CreateContext의 값에 들어가는건 default값으로 트리안에서 적절한 Provider를 찾기 못했을 때만 쓰이는 값이다.
function App(){
 return (
 <ThemeContext.Provider value="light">
     <Home/>
     <Detail/>
 </ThemeContext.Provider>    
 ) 
}
function Detail(){
 const contextType = useContext(ThemeContext);
  return (
  <div>
      <h1>{contextType==="light" ? 밝음 : 어두움}</h1>
      </div>
  )
  
}

이렇게 사용이 가능하다.

단점 역시 존재한다.
Context API를 사용하면 컴포넌트를 재사용하기 어려워진다.

Context.Provider

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.

Provider의 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다. 값을 전달받은 컴포넌트는 value prop가 바뀔 때마다 다시 렌더링 된다.

즉, context data의 변화가 생기면 해당 context data를 갖는 Context Provider 하위의 모든 컴포넌트는 리렌더링이 된다. 그렇기 때문에 하위의 컴포넌트가 불필요하게 다시 렌더링 되는 문제를 대비해야한다.

useContext

useContext는 Context로 분류한 데이터를 쉽게 받아올 수 있게 도와준다.