패키지 설치
npm i styled-components
const StBox = styled.div` // 백틱을 찍어줌.
width : 100px;
height : 100px;
border : 1px solid ${ (props) => props.borderColor }
`
템플릿 리터럴
로 props를 가져와서 같은 컴포넌트라도 props와 부여한 속성을 이용하여 다른 스타일을 적용시킬 수 있음. $
표시가 필수임.백틱
안에는 적용할 css code 입력정의
const [ state, setState ] = useState(initailState);
useState(0)
하면 기본 state값이 0으로 설정됨.정의
// 기존에 사용하던 방식 (식을 넣어줌)
setState(number + 1);
//함수형 업데이트 (함수 자체를 넣어줌)
setState( () => {} );
// 함수형 업데이트 예시
// (현재 number의 값을 가져와서 그 값에 + 1을 더하여 반환)
setState( (currentNumber) => {return currentNumber + 1} )
setState( () => {} )
함수형 인자에는 현재 state를 넣어줄 수 있음.
setState( () => {} )
{}안에는 값을 변경하는 코드를 작성한다.
( == 객체타입)
() => {}
return 명시 필수() => ()
return 명시 하지않아도 OK정의
Q. 어떤 화면이 그려지는 것을 뭐라 말하는가?
A. 렌더링.
이 배열에 값을 넣으면 그 값이 바뀔때만 useEffect를 실행할게.
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳이다.
useEffect( () => {
// 실행할 함수
}, [의존성 배열] );
비워둔채로
두면 된다.cleanUp
을 사용해보기.컴포넌트가 화면에서 사라졌을 때, 무언가를 실행하고 싶다. 할 때 쓰는 것!
useState
와 props
이해 필수npm install redux react-redux
부모 컴포넌트에서 자식 컴포넌트로만 props를 전달가능.
이는 props drilling 등의 문제를 가져왔음.
Local state (지역 상태)
Global state (전역 상태)
// 리듀서 기본값 설정
const initialState = {
number : 0,
}
// 리듀서
// 1. state // 2. action
const counter = (state = initialState, action) => {
switch ( action, type ) {
default :
return state;
}
};
store에서 어떤 action을 일으키는 것 =>
dispatch
Component에서 Redux의 Store를 조회하고자 할 때는,"useSelector" 라는 react-redux의 Hook을 사용한다.
⭐️const APP = () => { // 👇 현재 프로젝트에서 존재하는 모든 redux Module의 state를 가져와라
const conunterStore = useSelector( (state) => state );
console.log( counterStore )
- Module이란 reducer들을 모아놓은 파일을 뜻한다.
initialState
와 reducer
가 있다. ⭐️useSelector
를 사용한다.useSelector
의 (state) => state
는 모든 Module에서 state를 조회할 수 있다.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에서 상수는 대문자로 작성하는 규칙과 동일하다.
Redux는 유연한 체계를 가진 라이브러리다.
때문에 많은 것이 표준화 되어 있지 않음. payload도 공식 컨벤션이 아니라, 커뮤니티 컨벤션이다.
reducer 함수
를 export default
한다.action creator
함수를 export
한다.action의 type
은 app reducer action-type 형태로 작성
한다.module 파일 한 개에 action-type, action creator, reducer가 모두 존재하는 작성방식
payload : payload ➡ payload로 축약 작성 가능.
정의
Think. 같은 레이아웃 페이지이지만, 내용은 달라야 함. How to?
solution 1. useParams
를 이용해서 각각의 고유한 아이디값을 조회할 수 있음.
useParams
는 path에 있는 id값을 조회할 수 있는 Hook!path="works/ :id"
처럼 id를 넣고, 아이디 값은 param에서 useParams를 이용하여 각 Component 안에서 조회할 수 있다.param에서 useParams를 이용?
const param = useParams(); // path id 조회가능 Hook
Router.js
에 Router의 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인 App.js에서 import
한다.Header, Footer, Sidebar
이런 것들이 필요하다면 Router의 Layout을 적용해서 children을 활용할 수 있음.