Achievement Goals

• React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.

  React 개발 방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다는 점이다. 컴포넌트를 만들고 나서 페이지를 조립해 나간다. 즉 상향식(bottom-up)으로 개발을 해나가게 된다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다는 것이다. 그래서 현업에서 PM 이나 UX디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층구조로 나누는 것이 FE가 가장 먼저 해야 할 일이다. 그리고, 하나의 컴포넌트는 한가지 일만 한다. 이를 단일 책임 원칙(single responsibility principle) 이라고 한다.
  컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성 (attributes)처럼 전달받을 수 있고, 데이터는 위에서 아래로 흐른다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 된다는 소리이다. 이는 데이터 흐름이 하향식(top-down)임을 의미한다. 이 원칙은 React에 있어서 가장 중요한 원칙이다. 오죽하면, 단방향 데이터 흐름(one-way data flow) 라는 키워드가 React를 대표하는 설명중 하나일 정도이다.

• state는 언제 써야 하는가?

  다음 세가지 질문을 통해 판단해볼 수 있다.

  • 부모로부터 props를 통해 전달되는가?
  • 시간이 지나도 변하지 않는가?
  • 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?
    이 세가지 경우가 모두 아니라면 state를 쓸 수 있다.

• State 끌어올리기의 개념을 이해할 수 있다.

  단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다.
  그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있다. React가 제시하는 해결책은 아래와 같다.
  " 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. "
  여전히 단방향 데이터 흐름의 원칙에 부합하는 해결방법이다. 이것이 바로 상태 끌어올리기이다.

• Side effect가 어떤 의미인지 알 수 있다.

  부수효과 로서, 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다.
  React 컴포넌트에서 Side Effect의 예)
  1. 타이머 사용(setTimeOut)
  2. 데이터 가져오기 (fetch API, localStorage)

• React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비
  즈 니스 로직과 표현 영역 구분)

  O

• Side effect의 예를 들 수 있다.

  1. 타이머 사용(setTimeOut)
  2. 데이터 가져오기 (fetch API, localStorage)

• Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를
  React 컴포넌트 내에서 처리할 수 있다.

  O

• Effect Hook에서의 dependency array 사용법을 이해할 수 있다.

  useEffect(함수, [종속성1, 종속성2, ...])
  만약 두번째 인자에 []을 준다면 effect함수는 딱 한번만 실행된다. 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때 사용할 수 있다.

• 컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을
  이해할 수 있다.

  O

알고리즘풀이

6문제를 풀었다. ( 104 ~ 109 )

CS공부

CS50 1주차 컴퓨팅 사고를 복습했다.