React의 유의를 읽고 코드를 작성했습니다.

1949 단어 연습React학습 기록

The React Way



React의 유의 을 읽고 배운 컴포넌트의 계층 구조 등을 의식한 개발 연습

절차



UI를 컴포넌트 계층 구조로 떨어뜨림


  • 단일 책임 원칙(single responsibility principle)을 의식
  • 컴포넌트를 계층 구조로 정렬

    • React로 정적 버전 만들기


  • 처음에는 데이터 모델을 받고 UI를 그리기 만하는 사용자가 조작 할 수 없다는 버전을 만듭니다.
  • props를 통해 데이터를 전달하는 방식으로 구성 요소를 구성합니다.
  • 정적 버전을 만들 때 state는 필요하지 않습니다 (동적 데이터 데이터를 처리하는 기능)
  • 컴포넌트는 상향식이나 하향식으로 만들어도 문제 없다. 큰 프로젝트에서는 테스트를 작성하면서 전자를, 간단한 앱에서는 후자의 편이 편합니다

    • UI 상태를 표현할 필요가 있고 충분한 상태를 결정합니다.


  • 앱에 필요한 업데이트 가능한 상태의 최소 구성을 먼저 고려하십시오.
  • 동적으로 변화하는 것, 그렇지 않은 것을 생각하여 props인지 state인지를 판단한다

    • state 를 어디에 배치해야 하는지를 명확히 한다


  • 어떤 컴퍼넌트가 state 를 소유하는지를 명확하게 한다
  • 공통의 부모 컴퍼넌트를 찾아 state 를 준다
  • 단방향 데이터 흐름에 대한 인식

    • 역방향 데이터 흐름 추가


  • 해독 중 ...

    • Sketch로 이랑 만들기



    문서의 모형을 참고로 Sketch로 만들기



    폴더 구성 및 계층 구조 내보내기



    시도한 소감




  • 코드를 작성하는 전 단계에서 생각해야 할 것이 상상 이상으로 많았다.
  • 흐름을 의식하면서 쓰면 # 2의 정적 사이트를 만드는 것만으로 4 시간 정도 걸렸습니다 ...
  • React에 한하지 않고 설계라는 개념을 가질 필요가 있다고 배웠다.
  • toLowerCase() 를 사용하여 대소문자 관계 없이 검색할 수 있도록 했습니다.
  • 在庫商品のみ表示 와 カテゴリー名 등을 구현할 수 없었기 때문에 향후 추가.
    • 학습기록 : 33일째
    학습기록 : 52일째

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage