1. React Component

키워드

• REST API 와 GraphQL

  • REST API 란 무엇인가

  • GraphQL은 왜 등장했는가?

  • REST API vs GraphQL

• JSON

• DSL(Domain-Specific Language)

• 선언형 프로그래밍

• 명령형 프로그래밍

• SRP(단일 책임 원칙)

• Atomic Design

• React component 와 props

데이터

백엔드에서 JSON 형태의 데이터를 넘겨준다고 가정

프론트엔드는 이 데이터를 사용자가 볼 수 있도록 UI를 구성

JSON

• 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법

• 자바스크립트의 구문형식을 따르지만 언어 독립형 포맷

• 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 포맷

• 문자열 형태로 존재하여 네트워크를 통해 전송할 때 유용하지만, 데이터에 액세스 하기 위해서는 네이티브 JSON 객체로 변환되어야함

  • 자바스크립트는 JSON 전역객체를 통해 문자열과 JSON 객체의 상호변환을 지원

  • Parsing: 문자열에서 네이티브 객체로 변환하는 것

  • Stringification(문자열화) : 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정

REST API vs. GraphQL

서버와 클라이언트가 정보를 주고 받을 때 사용하는 API

REST API

• URI는 정보의 자원을 표현

• 자원에 대한 행위는 HTTP Method로 표현(GET, POST, PUT, DELETE)

REST API의 한계와 GraphQL의 탄생

• 하나의 View를 그리기 위해 여러 번 API를 호출해야함

• 다양한 기종에서 필요한 정보를 일일히 구현하는 것이 어려움

• GraphQL은 클라이언트에서 필요한 데이터만 쿼리를 통해 획득할 수 있게 하여 통신 로직의 구현이 편리해짐

GraphQL

• 자원을 특정하는 것은 URL이 아닌 GraphQL Schema

• 어떤 작업을 진행하는지 결정하는 것은 HTTP Mehod 대신 Query, Mutation

• 한 번의 요청으로 여러 리소스에 접근할 수 있음

• 요청할때 사용하는 Query문에 따라 응답의 구조가 달라짐

• REST API에 비해 HTTP 요청의 횟수와 응답의 사이즈를 줄일 수 있음

컴포넌트와 Props

리액트의 특징

1. 선언형

2. 컴포넌트로 구성

간단한 컴포넌트들을 합쳐서 복잡한 UI를 만들 수 있음

컴포넌트를 나누는 기준

• SRP(Single Responsibility Principle)

• CSS

• Design layer

• Information Architecture

SRP

객체는 단 하나의 책임만 가져야 한다.

컴포넌트가 여러 가지 책임을 가지고 있다면 분리해야함

Extract Function

일단 길게 코드를 작성하고 자를 수 있을 때 함수로 추출. 나중에 파일로 분리 가능

Atomic Design

• Atoms : 디자인의 최소 단위. input, label, button, ...

• Molecules: Atoms를 모아서 만든 한가지 기능을 수행하는 단위

• Organisms: Atoms와 Molecules로 구성된 사용자에게 의미와 역할이 존재하는 단위

• Template: 여러 Oragnism으로 구성된 최종 레이아웃 형태

• Page: 템플릿에 콘텐츠가 더해진 사용자에게 전달되는 최종 디자인의 형태

Props

나눠진 컴포넌트를 연결하는 방법