배운 것
- styled-components
- React Hooks
- useState
- useEffect
- Redux
- React-router-dom
해야할 일
- 배운 것을 활용하여 todolist 만들기
Styled-components
- 설치
yarn add styled-components
// 또는
npm install styled-components- import
import styled from 'styled-components';-
조건부 스타일링을 위해 사용
그냥 className을 사용하여 css로 작성하면 조건을 걸기가 까다롭고 따로 js코드를 사용해야 한다.
styled-components를 이용하면 바로 js코드를 작성하듯이 조건을 걸어 사용할 수 있다.const BoxStyle = styled.div` background-color: ${(props) => props.backgroundColor} ` const App = () => { return ( <div> <BoxStyle backgroundColor='blue'>파란배경</BoxStyle> </div> ) }
React Hooks
useState
- 기본 형태
const [state, setState] = useState(initialState)-
state가 객체 타입일 때는 불변성을 유지해주어야 한다.
-
함수형 업데이트 방식
-
기존 방식으로 코드를 작성
setState(value + 1) setState(value + 1) setState(value + 1)이렇게 사용하면 리액트에서 불필요한 랜더링을 줄이기 위해 자동적으로 batch 처리를 하여 +3이 아니라 +1씩만 더해진다.
-
함수형으로 작성
setState((prev) => prev+1) setState((prev) => prev+1) setState((prev) => prev+1)이렇게 함수형으로 작성을 하면 순차적으로 하나씩 실행하기 때문에 +3씩 더해진다.
-
useEffect
-
react component가 렌더링 될 때마다 특정 작업을 수행하는 Hook
-
의존성배열(dependency array)
state가 변할 때 마다 리렌더링이 되기때문에 해당 배열 안의 값이 바뀔 때에만 useEffect를 사용한다는 뜻이다.
비워놓으면 첫 렌더링 시에만 실행된다.useEffect(()=>{ // 실행하고 싶은 함수 }, [의존성배열])
Redux
중앙 관리소를 만들어 전역 상태를 설정하여 props drilling을 해결 가능
props drilling - 데이터를 사용하지 않아도 하위 컴포넌트에 데이터를 전달하기 위해 계속 props를 내려주는 것
-
module을 만들어서 store에 연결하는 법
// configStore.js //module import import counter from '../modules/counter'; const rootReducer = combineReducers({ //module counter: counter, });- [redux-hook]useSelector로 컴포넌트에서 store 조회
const number = useSelector(state => state.counter.number); // 0
- [redux-hook]useSelector로 컴포넌트에서 store 조회
-
reducer
setState의 역할을 해줌 (상태를 변경)// 이런식으로 state에 initialState와 action을 할당해주는 형태로 씀 const counter = (state = initialState, action) => { switch (action.type){ default: return state; } } -
action 객체
반드시 type이라는 key를 가져야함
type의 value는 상수 (js에서 상수는 대문자로 작성) -
dispatch
useDispatch를 사용하여 reducer로 action을 전달하는 역할 -
action creator
action객체를 한 곳에서 관리 할 수 있도록 함수를 생성하는 것- 휴먼 에러(오타)를 방지할 수 있음
- 유지보수 용이
- 코드 가독성이 높아짐
- https://redux.js.org/api/bindactioncreators/#todoactioncreatorsjs
-
payload
action 객체에 넣어줄 목적어(데이터) -
Ducks 패턴으로 module을 작성해야함
// Action Value // Action Creator // Initial State // Reducer // export default reducer
React-router-dom
여러 페이지를 구현할 수 있게 하는 패키지
-
이런식으로 사용
const Router = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="about" element={<About />} /> <Route path="contact" element={<Contact />} /> <Route path="works" element={<Works />} /> </Routes> </BrowserRouter> ); }; -
react-router-dom Hooks
- useNavigate
- useLocation
- 이 외에도 여러 훅이 있음
-
Link
a 태그의 기능을 대체하는 API
a 태그를 사용하면 페이지가 새로고침 되어 사용성이 떨어진다. -
props.children
layout을 구성할 때 사용
Dynamic Route
-
동적 라우팅
path부분에 유동적인 값을 넣어서 특정 페이지로 이동하게 끔 하는 것 -
useParams
// Router.js <Route path="works" element={<Works />} /> <Route path="works/:id" element={<Work />} />이런식으로 path부분에 /:id를 넣었을 때 id값을 파라미터로 가지는데,
이런 파라미터 정보를 가져와 활용할 때 사용하는 hook이다.
흑흑 배운 것만 정리하다가 하루가 끝났다.
그래도 강의를 두 번 들으니까 알 것 같기도하고...
