outwater 2021. 2. 17. 03:36

Start Think:

🎄오늘 한 일


✔️ 1.  React에서의 생명주기(Lifecycle) 과 데이터의 흐름 공부

  • React에서 컴포넌트들은 각자의 생명주기를 갖는다.  컴포넌트가 생성될 때와 업데이트 될 때, Unmount되어 제거 될 때 마다 이를 감지하고, 특정 시기에 맞추어 코드가 실행되도록 할 수 있다.
    아래의 lifecyle 그래프를 반드시 이해하고 숙지하는 것이 필요하다고 느꼈다.
  • React에서의 데이터 흐름에 대해서 배웠다. 일반적으로 리액트에서는 데이터가 단방향으로 흐르고, 여러 컴포넌트가 특정 데이터를 필요로 한다면, 해당 데이터는 컴포넌트들의 공통 상위 컴포넌트에 위치해야 한다는 것을 배웠다. 
    추가로 역방향 데이터 흐름이 필요한 경우( 자식컴포넌트에서 부모 컴포넌트의 state를 변경해줄 때)에는 이 상태를 변화시키는 함수를 하위 컴포넌트에 props로 전달하여 해결할 수 있음을 배웠다.
React 컴포넌트의 생명주기

✔️ 2.  React Twittler 다시 만들기 ( with 민정님^.^)
    React의 학습의 출발점이자 기본 개념을  모두 체험할 수 있는 'Twittler'를  이전에 영혼의 페어였던 민정님과 다시 한 번 만들어보는 시간을 가졌다. React는 너무 재밌는거라고 그렇게 말을 해놨었기때문에... 네비게이터로서 React의 재미를 꼭 알려주고자 최선을 다해 Twittler를 만드는 것을 도왔다. 다행히 고객님께서 대만족을 해주셔서 너무 재밌고 알찬 시간이었다. ㅎㅎ 
   1) 코드 작성 전 컴포넌트를 이해하고 구조를 잡는 것
   2) 컴포넌트들의 UI 를 만들고,
   3) 컴포넌트들의 data를 연결하여 적절하게 state와 props를 통해 컴포넌트간의 관계를 만들어주는 것
   4) 이벤트 핸들러 함수를 작성하여 적절하게 연결시켜주는 것
까지 기본적이지만 너무 중요한 내용들이었기에 다시 복습하는 좋은 시간이 된 것 같아 뿌듯하였다. : )

React로 만들어본 Twittler