React

React 완벽 복습

리액트 기초 및 실습 컴포넌트

프로그래머스 데브코스에서 진행한 SNS Projct를 마친 후,

리액트 지식에 대한 부족함을 많이 느꼈고 데브코스 강의를 들어서 익힌 개념이지만
프로젝트에서 바로 반영하기에 어려움을 느껴서 조금 더 보충하고자
리액트 강의를 다시 듣고 남기는 TIL입니다!

컴포넌트가 정확히 무엇일까요?

• React 핵심 개념 중 하나

• 결국 모든 사용자 인터페이스는 컴포넌트들로 구성

• 사용자 인터페이스에서 재사용 가능한 구성 요소

• 결국, 컴포넌트들은 HTML, CSS 그리고 JS의 조합

• 웹 애플리케이션의 모든 사용자 인터페이스들은 분할이 가능

리액트 코드는 선언적(Declarative) 방식으로 작성

• 리액트는 HTML, CSS, JS로 구성된 반응 가능한 컴포넌트들로 구성된 리액티브하고 재사용 가능한 컴포넌트들을 구축할 수 있도록 해줌

• 이러한 컴포넌트들을 만들기 위해 선언적 접근 방식을 사용

• prop이나 state가 변경될 때 렌더링된 요소와 새로 반환된 요소를 비교하여 실제 DOM 업데이트 여부를 결정

  • 일치하지 않으면 새로운 요소로 DOM을 업데이트
  • 이러한 프로세스를 재조정, 비교조정(Reconciliation)

• 바뀐 부분만 실제 DOM에 적용하여 최소한의 DOM만 조작하는 VirtualDom에서 업데이트 횟수를 줄임

• 렌더링할 때 필요한 부분만 변경

• 리액트는 내부 동작 횟수를 추상화하여 선언적 방식으로 사용

  • 달성하는 과정을 하나하나 기술하는 것보다 필요한 것이 어떤 것인지 기술하는 데 중점을 두고 애플리케이션의 구조를 세워 나가는 프로그래밍 구조

합성(Composition)

• 컴포넌트에서 다른 컴포넌트를 구축하는 접근법

• children prop, 사용자 정의 prop을 통해 엘리먼트나 컴포넌트를 추가하는 것이 가능

• 재사용 가능성이 높은 컴포넌트