React

오늘 공부한 부분

• toy project 만들기(hot-sauce)
• React Router
• React Redux 기초

toy project

Build a Hot Sauce Heat Meter and Hot Ones Sauce List App with React + Hooks

내가 너무 좋아하는 CJ의 리액트 강의를 보고 따라했다.
react-jss를 써서 같은 컴포넌트에서 직접 스타일을 지정할 수 있게 했다.

import injectSheet from 'react-jss';

const styles = {
	container: {
		width: '100%',
		height: '100%',
		display: 'flex',
		color: 'yellow',
		flexDirection: 'column'
	}
}

export default injectSheet(styles)(컴포넌트명);

이렇게 쓰고 container 클래스를 주면 해당 스타일이 적용된다.
대신 export 할때 injectSheet으로 감싸줘야함.

Router 공부하기 전에 hook 복습하려고 본건데, 끝 부분에서 Router가 나와버렸다.

Switch, Route 등을 써보았다… View component에서는 최대한 데이터 조작을 줄여야 한다는 것을 알았다. 부모 컴포넌트에서 최대한 데이터 처리를 해서 보내주는 걸루…

CJ 아저씨 너무 좋앙. 친구하고 싶다.

Router

패캠 강의 내용 정리.

• SPA 장점: 서버 자원 아낄 수 있고, 사용자 경험 높일 수 있음

• SPA 단점: 앱 규모 커지면 JS 파일 크기가 커질 수 있음 -> code splitting으로 처리
  브라우저에서 JS 구동되지 않으면 UI볼 수 없음 (검색엔진에서 크롤링 불가) -> SSR 처리
  라이브러리: ‘react-router’ - 컴포넌트 기반 라우팅 / ‘Nex.js’ - SSR, 파일경로/이름 기반 라우팅

• BrowserRouter : HTML5 History API 사용, 주소만 바꾸고 페이지는 다시 불러오지 않음. Ie 9 이하 X
• HashRouter : 옛날 방식. #사용. 못생김 😂. 옛날브라우져에서도 사용가능.
• MemoryRouter: 브라우저 주소와 무관. 임베디드 웹앱, 리액트 네이티브 에서 사용
• StaticRouer: SSR
• Router 컴포넌트: 라우트 정의할 때 사용하는 컴포넌트
• Link 컴포넌트: 사용한 Router에 사용한 주소를 바꿈. a 태그지만 새로고침 X

history

• action: 라우터에서 가장 마지막에 발생한 액션 (이동: push, 앞/뒤 이동: pop)
• block: 이탈방지 (뭘 작성하다가 실수로 나가는 거 방지)
• go: 앞/뒤로 (1, -1)
• length: 방문 기록 길이
• listen : 경로에 변동 생겼을때 특정 함수를 호출하고 싶을때
• location: 현재 위치
• push: 특정 주소로 이동
• replace: 방문기록 안 남기고 특정주소로 이동

withRouter : 라우터 컴포넌트가 아닌 곳에서 match, location, history 사용 조건부로 이동할 때 씀. ex 로그인 성공했을 때

Switch - 여러 라우트 중 하나만 보여줌 / 404 페이지 보여줄 때 유용

NavLink - 현재 주소와 일치한다면 스타일 바꾸기 , ‘activeStyle’ 사용 , ‘activeClassName’으로 클래스도 줄 수 있음 , isActive 함수 (match, location)

Redux

리덕스 == 상태관리 라이브러리

글로벌 상태 관리, 로직 분리 = Context API + useReducer 로도 가능

redux 장점
미들웨어의 역할 = 비동기 작업을 더욱 체계적으로 관리 가능
다양한 함수 hooks 사용 가능 (connect, useSelector, useDispatch, useStore…)
기본적인 최적화가 이미 되어 있다.
devTools 잘되어있음

주요 키워드
액션: 상태에 어떤 변화가 필요할 때. 액션 == 객체 -> 어떻게 업데이트 할지, 관련 정보 있음
ex. {type: ‘TOGGLE_VALUE’}
액션 생성함수 (Action Creator): 파라미터 받아와서 액션 객체 만들어줌
ex. const changeInput = text => ({type: ‘CHANGE_INPUT’, text: ..});
리듀서(reducer) : 변화를 일으키는 함수, 두 가지 파라미터 (state, action), action 타입이 무엇이냐에 따라 다른 업데이트 작업 진행 / 새로운 상태를 만들어준다. / 불변성 유지해주는 것 유의!

• 디스패치 (dispatch: 액션 발생시키는 것, 액션을 스토어한테 전달)
• 구독 (subscribe: 파라미터로 특정함수 넣어주면 액션 디스패치 될때마다 함수 실행됨)

리덕스 규칙

• 하나의 앱에서는 하나의 스토어만
• 상태는 읽기전용(불변성을 지켜주셈-)
• 변화를 일으키는 함수 리듀서는 순수 함수여야함.
  *리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음 / 이전의 상태는 절대로 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환해야함.
  똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야함.
  (동일 인풋 -> 동일 아웃풋)
  ex. New Date(), Math.random(), axios.get() 같은 함수 X || reducer 밖의 변수를 참조해도 X
  전달받은 파라미터만 사용해서 상태를 변경시켜줘야함

사용 라이브러리: redux, react-redux