8월 9일 월요일

• 컴포넌트 단위로 개발하기 챕터 공부를 하였다.나는 아직 리액트에 대한 개념이 많이 부족한 것 같다. 코드스테이츠를 중지하였을 때 진심으로 리액트와 관련된 실습을 많이 진행해야할 것 같다.

8월 10,11 화,수요일

• React Custom Component 스프린트를 진행하였다.

• CSS방법론의 공통적인 지향점
  • 코드의 재사용
  • 코드의 간결화
  • 코드의 확장성
  • 코드의 예측성

• 대표적인 CSS방법론
  • BEM
    • Block, Element, Modifier로 구분해서 클래스명을 작성하는 방법이다.
  • 구분방법은 다음과 같다
    • .header__navigation--navi-text
  • 문제점
    • 클래스명 선택자가 장황해지고 이로인해 재사용할 때마다 모든 UI컴포넌트를 명시적으로 확장해야만 했다.
• 결국 CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 나왔다.
  • 대표적으로 Styled-Component
    • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리하여 사용할 수 있는 아주 단순한 패턴을 제공한다.

styled Component의 특징

• Automatic critical CSS
  • 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다.
  • 코드를 적절히 분배해 놓으면, 사용자가 애플리케이션을 사용할 때 최소한의 코드로도 화면이 띄워지도록 할 수 있다.

• No class name bugs
  • 스스로 유니크한 클래스네임을 생성한다. 이것 덕분에 클래스네임의 중복이나 오타로 인해 생기는 버그를 줄여준다.

• Eaiser deletion of CSS
  • 원래는 사용하지않을 계획이거니 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기 위해 CSS 파일 안의 className 을 찾아야만했다.
  • 하지만 styled component는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에, 컴포넌트를 더 이상 사용하지 않아서 삭제하게 된다면 이에 대한 스타일 속성도 같이 삭제가 된다.

• Simple dynamic styling
  • className 을 수동적으로 관리할 필요 없이 React의 Props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다.

• Painless maintenance
  • 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에, 코드의 크기가 커지더라도 유지보수가 어렵지 않다.

• Automatic vendor prefixing
  • 개별 컴포넌트마다 기존의 CSS를 이용해서 스타일 속성을 정의하면 끝, 나머지는 styled component가 알아서 처리해준다.
    

8월 12,13일 목,금요일

• Cmarket Hooks

  상태란? -> UI에 동적으로 표현될 데이터이다.

• 상태의 두 가지 구분
  • 로컬
    • 특정 컴포넌트 안에서만 관리되는 상태
  • 전역
    • 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

Side Effect란> -> 함수(또는 컴포넌트) 의 입력외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청(backend API request)

• 상태 관리 라이브러리가 왜 필요한가?
  • React는 상태 관리를 위한 라이브러리는 아니다. props 를 사용할 때 직접 내려주려면 driling 현상이 있다. 근데 store같이 관리 라이브러리가 있으면 store에 연결해서 받을 수 있다.

• Redux에서 사용하는 Action, Reducer, 그리고 Store의 의미와 특징이 무엇인가?

• Redux의 세 가지 원칙 그리고 주요개념과 어떻게 연결되어 있는가?

• Presentational Component와 Containter Component의 개념이 무엇인가?
  • 1. Presentational Component
    • API요청이 없더라도 작동하는 컴포넌트에서 어떤 데이터가 들어오던지 상관하지 않고, 만약 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현 하는 것

• Redux hooks
  • UseSelector
  • usuDispatch
  • 를 사용해 store를 업데이트 할 수 있는가?

기억 해야할 점

• React라이브러리를 사용해 웹 어플리케이션을 개발하면서 컴포넌트를 생성하고 어떠한 사용자 이벤트를 통해 해당 컴포넌트 또는 다른 컴포넌트에 변화를 줄 수 있었다.

• 그런데 왜 Redux라는 별도의 개념을 또 알아야 하는 것인가?
  • React에서는 상태와 속성(Props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면, Redux Sprint에서는 컴포넌트와 상태를 분리하는 패턴을 익힌다. 그 동안은 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있었는데, 상태 변경 로직을 컴포넌트로부터 분리하게 된다면? 표현에 집중한 보다 단순한 함수 컴포넌트로 만들 수 있다.
  • Redux는 React없이도 사용할 수 있는 상태 관련 라이브러리이다.