[TIL][React] react hook, redux...

배운 것

• 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

• 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이다.

---

흑흑 배운 것만 정리하다가 하루가 끝났다.
그래도 강의를 두 번 들으니까 알 것 같기도하고...