브래의 슬기로운 코딩 생활

컨텍스트(Context) 컨텍스트란 무엇인가? 컴포넌트 간 데이터 전달 방식 리액트 컴포넌트 사이에서 props를 통해 데이터를 전달하는 방식 부모에서 자식으로 단방향 전달 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 depth가 깊어질수록 반복적인 코드 생성, 사용하기 불편 Context - React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법 - 컴포넌트 트리를 통해 곧바로 컴포넌트에 데이터를 전달하는 방식 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있음 데이터를 한곳에서 관리 - 코드가 단순해지고 디버깅에 유리 언제 컨텍스트를 사용해야 할까? 여러 컴포넌트에서 자주 사용하는 데이터를 사용할 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 e..

컴포넌트와 Props 컴포넌트 기반 구조 (Component-Based) •컴포넌트 - 독립적인 기능을 수행하는 작은 기능 단위 모듈 •리액트에서는 모든 페이지가 컴포넌트로 구성됨 •하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 -레고 블록을 조립하는 것처럼 컴포넌트를 조합해서 사용 •컴포넌트 사용 - 개발 시간을 줄이고 유지보수 비용도 줄일 수 있음 함수와 리액트 컴포넌트 리액트 컴포넌트 •어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 •객체 지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷 Props •Property - 속성 •리액트 컴포넌트의 속성 Props - 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 •컴포넌트의 모습..