styled-component
패키지 설치
npm i styled-components
const StBox = styled.div` // 백틱을 찍어줌.
width : 100px;
height : 100px;
border : 1px solid ${ (props) => props.borderColor }
`템플릿 리터럴로 props를 가져와서 같은 컴포넌트라도 props와 부여한 속성을 이용하여 다른 스타일을 적용시킬 수 있음.- 템플릿 리터럴로 받아와야해서
$표시가 필수임. 백틱안에는 적용할 css code 입력- styled 뒤에는 어떤 태그로 컴포넌트를 감쌀 것인지를 나타냄.
장점
- 조건부 스타일링을 하기 쉬움.
- className을 사용하면 조건부 스타일링 하기가 까다로움. 이런 문제를 해결해주는 것이 스타일 컴포넌트임.
useState()
정의
- useState는 React에서 가장 기본적인 Hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. (상태관리)
const [ state, setState ] = useState(initailState);- state << 변수로 사용
- setState << state값을 수정 (업데이트)
- useState(기본 default 설정값)
a.useState(0)하면 기본 state값이 0으로 설정됨. - 배열을 반환하고, 구조분해 할당으로 꺼내놓은 모습이다.
함수형 업데이트
정의
- setState를 사용하는 방식 중 하나
// 기존에 사용하던 방식 (식을 넣어줌)
setState(number + 1);
//함수형 업데이트 (함수 자체를 넣어줌)
setState( () => {} );
// 함수형 업데이트 예시
// (현재 number의 값을 가져와서 그 값에 + 1을 더하여 반환)
setState( (currentNumber) => {return currentNumber + 1} )setState( () => {} ) 함수형 인자에는 현재 state를 넣어줄 수 있음.
setState( () => {} ) {}안에는 값을 변경하는 코드를 작성한다.
Keep in mind ✅
- useState로 원시데이터가 아닌 데이터를 변경할 때,
( == 객체타입)
"불변성"을 유지해야 한다.
Arrow function
Keep in mind ✅
() => {}return 명시 필수() => ()return 명시 하지않아도 OK
useEffect
정의
- React Component가 렌더링 될 때마다 특정 작업을 수행할 수 있게하는 Hook.
요약🔥
- 컴포넌트가 렌더링될 때 useEffect 실행된다.
Keep in mind ✅
Q. 어떤 화면이 그려지는 것을 뭐라 말하는가?
A. 렌더링.
의존성 배열 (Dependency array)
- useEffect에는 의존성 배열이라는 것이 있다.
이 배열에 값을 넣으면 그 값이 바뀔때만 useEffect를 실행할게.
ㄴ == 함수의 실행조건을 제어
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳이다.
useEffect( () => {
// 실행할 함수
}, [의존성 배열] );Tip
- 어떤 함수가 Component가 렌더링 될 때 딱 한 번만 실행되게 하고싶으면?
=> 의존성 배열을비워둔채로두면 된다. - 의존성 배열에 값이 있는 경우는?
=> 최초 렌더링 뿐만 아니라, 해당 값이 변할 때 마다 useEffect 안에 있는 코드도 계속해서 실행이 된다. - useEffect와 함께
cleanUp을 사용해보기.
cleanUp ?
컴포넌트가 화면에서 사라졌을 때, 무언가를 실행하고 싶다. 할 때 쓰는 것!
- useEffect 안에 return을 넣어줌.
- return 안에 실행할 함수를 넣어줌.
cleanUp 사용법 _ 출처 : 벨로퍼트
Redux
- 전역 상태관리 (글로벌 상태관리)
- 사전 지식으로
useState와props이해 필수
설치방법
npm install redux react-redux
기존 컴포넌트 상태관리
부모 컴포넌트에서 자식 컴포넌트로만 props를 전달가능.
이는 props drilling 등의 문제를 가져왔음.
리액트에서 상태관리는 두 분류로 나뉜다.
-
Local state (지역 상태)
- 컴포넌트 안에서 useState를 이용하여 생성한 상태 or props children
-
Global state (전역 상태)
- Redux를 이용하여 store에서 state를 관리
Keep in mind ✅
- Reducer는 함수다.
- Reducer는 action을 일으켰을 때, 자동실행된다.
- 그 action에 맞게 데이터를 수정해준다.
- store에 있는 데이터를 바꿔주는 역할을 Reducer가 한다.
Reducer
// 리듀서 기본값 설정
const initialState = {
number : 0,
}
// 리듀서
// 1. state // 2. action
const counter = (state = initialState, action) => {
switch ( action, type ) {
default :
return state;
}
};store에서 어떤 action을 일으키는 것 =>
dispatch
module과 store 연결 확인 방법
- Component에서 store를 직접 조회한다.
⭐️Component에서 Redux의 Store를 조회하고자 할 때는,"useSelector" 라는 react-redux의 Hook을 사용한다.⭐️
const APP = () => { // 👇 현재 프로젝트에서 존재하는 모든 redux Module의 state를 가져와라
const conunterStore = useSelector( (state) => state );
console.log( counterStore )정리
- Module이란 reducer들을 모아놓은 파일을 뜻한다.
- 보통 Module은 기능의 이름을 따서 파일을 생성한다.
- ⭐️ Module의 구성요소로
initialState와reducer가 있다. ⭐️ - Module을 만들면 Store에 연결해야 한다. (export - import)
- Component에서 Store를 조회할 때,
useSelector를 사용한다. useSelector의(state) => state는 모든 Module에서 state를 조회할 수 있다.
Keep in mind ✅
- type이라는 key를 가진 객체를 넣어서 형식 맞추기.
요약🔥
-
Reducer에게 값을 변경하라는 명령 =>
action -
내가 어떤 action을 하길 원한다고 reducer에 요구하면, reducer가 해당 action을 실행시켜준다.
-
action은 객체타입이다.
ㄴ{ type: "PLUS_ONE" } -
action객체란 반드시type이란 key를 가져야하는 객체이다. -
action은 Reducer로 보낼 명령이다.
-
dispatch란 action 객체를 reducer로 보내는 전달자 함수이다.
// action 전달 // 보낼 action <button onClick={ () => { dispatch( {type: "PLUS_ONE"} ) } }></button> -
Reducer란 dispatch를 통해 전달받은 action객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 변화를 만드는 함수다.
// Reducer
cosnt Counter = (state = initialState, action) => {
console.log(action); // 받아온 action 값 조회
switch(action.type) {
case "PLUS_ONE" :
return {
number: state.number + 1 ;
}
case "MINUS_ONE" :
return {
number: state.number - 1 ;
}
default :
return state;
}
}-
dispatch를 사용하기 위해서는
useDispatch라는 Hook을 사용해야 한다.
ㄴuseDispatch는 store 내장 함수 중, 하나다. action을 발생시킴 -
action객체 type의 value는 대문자로 작성한다.
ㄴJS에서 상수는 대문자로 작성하는 규칙과 동일하다.
Action Creator
- action을 만드는 생성자.
사용하게 되면 action 객체를 한 곳에서 관리할 수 있도록 함수와 action value 상수를 이용하게 된다.
Why use Action Creator?
- Human Error를 방지할 수 있음.
- Action Creator로 action 객체 생성 시, 코드에디터에서 자동완성 기능이 적용된다.
- 유지보수 효율성이 좋음.
- 코드 가독성 증가
- action creator 자체만으로 action들을 List-Up 해주는 일종의 문서같은 역할을 해줌.
Payload
- 정해진 값이 아니다.
- 미지수 N만큼 연산하고싶을 때 사용
- N이라는 목적어를 Action 객체에 같이 담아서 보내줄 때, payload를 사용한다.
Redux는 유연한 체계를 가진 라이브러리다.
때문에 많은 것이 표준화 되어 있지 않음. payload도 공식 컨벤션이 아니라, 커뮤니티 컨벤션이다.
Keep in mind ✅
- Action 객체는 무조건 type이라는 프로퍼티를 반드시 가져야한다.
- Module 생성은 reducer들을 모아놓은 파일을 export할 때를 시점이 모듏화한다는 것인데, 모듈화 했다는 것을 뜻함.
(틀리다면 댓글 부탁드리겠습니다. Module 생성 개념이 너무 헷갈려요 ㅠ)
Duck Pattern
- Redux Module 작성 방식
- 아래 해당 내용을 지켜서 Module을 작성하는 것을 말한다.
reducer 함수를export default한다.action creator함수를export한다.action의 type은app reducer action-type 형태로 작성한다.
module 파일 한 개에 action-type, action creator, reducer가 모두 존재하는 작성방식
Tip
- ES6에서 Key:value면 축약해서 작성가능.
payload : payload ➡ payload로 축약 작성 가능.
Dynamic Route
정의
- URL 안에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법 (== 동적 라우팅)
useParams 이라는 Hook을 이용해서 Dynamic route에서 path에 입력된 아이디 값을 가져오는 방법은?
- Dynamic Route를 사용하면 엘리먼트에 설정된 값은 같은 Component를 동일하게 랜더링한다.
Think. 같은 레이아웃 페이지이지만, 내용은 달라야 함. How to?
solution 1. useParams를 이용해서 각각의 고유한 아이디값을 조회할 수 있음.
useParams는 path에 있는 id값을 조회할 수 있는 Hook!
요약🔥
- React-Router-DOM을 통해서 Dynamic Route를 설정할 수 있다.
- Dynamic Route를 설정할 땐 path에
path="works/ :id"처럼 id를 넣고, 아이디 값은 param에서 useParams를 이용하여 각 Component 안에서 조회할 수 있다.
param에서 useParams를 이용?
const param = useParams(); // path id 조회가능 HookChildren의 용도
- Layout의 Children을 활용할 수 있음.
- props children?
- 어떤 Component들은 어떤 자식 에리먼트가 들어올지 미리 예상할 수 없는 경우가 있음. 이는 Box 역할을 하는 Sidebar OR Dialog와 같은 Component에서 자주 볼 수 있다.
(==> 크게 봤을 때, Layout 역할을 하는 Component라고 생각해볼 수 있음,) - Composition (합성)
요약🔥
- React-Router-DOM을 이용하면, SPA 기반 React 프로젝트 안에서 여러개의 프로젝트를 구현할 수 있다.
Router.js에 Router의 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인App.js에서 import한다.- React-Router-DOM은 여러가지 Hook을 제공한다.
- 항상 띄워져있는
Header, Footer, Sidebar이런 것들이 필요하다면Router의 Layout을 적용해서 children을 활용할 수 있음.
- 배움에는 끝이 없다.