221211 WIL 항해99 4주차

심화 주차 배운 내용 정리

1. Styled component
   1. Styled component란? 리액트에서 컴포넌트를 편하게 꾸미는 방식, props와 조건부스타일링 등을 활용할 수 있다.
   2. 조건부 스타일링: 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다. 조건문과 map등을 사용하여 스타일링에 적용할 수 있다.
   3. global styles:
      • 스타일링을 전역 상태로 관리할 수 있다. h2 , p 등의 전체적인 스타일링을 할 수 있다. 따라서 같은 스타일링의 반복을 줄일 수 있다.
      • app.js 혹은 index.js 등  라우터를 설정해주는부분에서 불러와 적용을 시켜주면 된다.
   4. css nesting
      • CSS 규칙을 다른 규칙안에 종속 시켜 그룹화하고 편리하게 관리할 수 있다.
      • nesting 을 위해서는 "nesting selelctor" 문법을 사용해야 한다.
      • 중첩이 과하면 좋지 않다. 3회정도까지 하는것이 좋다.
   5. css reset
      
      • 브라우저 마다 style이 default 값으로 적용되어 있기 때문에 본래 의도와 다르게 css가 적용될 수있다.
      • 이 브라우저 마다 default 값으로 적용되어 있는 style을 초기화 해주는 것을 css reset이라 한다.
      • 초기화 하는 방법은 구글링 해볼 것.
2. useEffect
   1. useEffect는 리액트에서 어떤 컴포넌트가 실행 혹은 변화가 있을 때 동적인 효과를 원하는 경우에 사용한다.
   2. component life cycle: 클래스형 컴포넌트에만 해당하는 개념으로 컴포넌트가 생성되고 소멸하는 주기를 말한다.
   3. 의존성 배열: useEffect를 사용하는 경우 state가 변경되어 리렌더링이 되면 useEffect가 꼐속해서 발생하고 이는 불필요한 반복이다. 이러한 경우에 하나의 빈 배열을 생성해주고 이 값에 변경이 있을때만 useEffect를 실행할 수 있는데 이때 만들어주는 빈 배열을 "의존성 배열" 이라 한다.
   4. strict mode: 리액트에서 제공하는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구. 아래와 같은 경우를 발견하는데 도움이 된다고 한다.
      • 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
      • 레거시 문자열 ref 사용에 대한 경고
      • 권장되지 않는 findDOMNode 사용에 대한 경고
      • 예상치 못한 부작용 검사
      • 레거시 context API 검사
      • Ensuring reusable state
3. Redux
   1. Redux란? props가 지역상태로 관리되는 경우에 불편했던 점들을 해소하고자 도입된 전역상태 관리 라이브러리 이다.
   2. props drilling: props가 부모 컴포넌트에서 자식 컴포넌트로 전달되는 것처럼 최상위 컴포넌트로부터 최하위 컴포넌트까지 전달될때의 불필요하게 중간 컴포넌트를 거쳐가야 하는 현상을 말한다.
   3. Store: Redux의 중앙 state 관리소
   4. module: Redux에서 변화를 일으키는 함수가 되는 reducer, 초기값이 되는 initial state 등이 모여 있는 state의 그룹
   5. dispatch: Redux에서 액션객체를 reducer를 보내주는 역할을 하는 전달자 함수
   6. action creator: 액션객체를 한곳에서 관리하기 편리하도록 만들어 두는 액션을 만드는 생성자
   7. action: 리듀서에게 보낼 "명령', 객체로 생성해야 하며 이를 "액션 객체" 라고 한다.
   8. payload: 명령어에서 목적어 역할을 하는 액션 객체에 같이 담아 보내주는 정보
4. React-router-dom
   1. react-router-dom이란? 리액트는 하나의 페이지를 가지는 SPA 이지만 여러 페이지를 가진 것처럼 사용하도록 만들어 주는 것
   2. react-router-dom hooks: react-router-dom을 사용할 경우 활용할 수 있는 다양한 기능
      1. useNavigate: 버튼을 클릭했을 때 우리가 보내고자 하는 path로 페이지를 이동하게 해줌
      2. useLocation: 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻어 페이지에서 여러가지 용도로 활용하 수 있도록 도와 줌
      3. Link: html 태그중에 a 태그의 기능을 대체하는 API로서 다른 페이지로 이동하게 해줌
   3. Dynamic route
      1. Dynamic route란? 리액트에서 특정한 정보를 보여주는 상세 페이지 등을 만들기위해 해당 정보의 id값으로 페이지를 구성하게 해주는 기능
      2. useParam: path의 있는 id 값을 조회할 수 있게 해주는 훅 

총평

 이번 주는 그래도 익숙해졌다고 체감 난이도가 쉬운 편이었다. 한단계가 더 있었으면 하는 아쉬움이 있다. 그런 와중에 여러가지 개인적인 일로 팀과제에 완벽하게 기여하지 못했다는 아쉬움이 크다. 항해에서 주어지는 내용만이 아니라도 배워야 하는 분량들이 상당히 많기 때문에 효율성을 추구하면서도 닥치는 대로 지식을 습득하려는 잡식성적 마음가짐이 중요한 시기가 아닌가 생각해본다.