리액트에 내장된 상태 관리 라이브러리인 Context API는 특정 컨텍스트 내의 모든 컴포넌트 간에 데이터를 공유할 수 있다. 명시적으로 다른 컴포넌트에 속성값 형태로 데이터를 전달할 필요가 없다. createContext 컴포넌트에 제공하고 읽을 수 있는 컨텍스트를 생성하는 함수다. 인자로 기본값을 전달할 수 있다. context.Provider Provider 하위에 있는 모든 컴포넌트들은 context 값을 공유한다. Provider의 value 속성값에 context 값을 대입할 수 있다. useContext 컨텍스트를 구독하고 읽을 수 있는 리액트 훅이다. 구독하고자 하는 컨텍스트 인스턴스를 전달하면 컨텍스트의 값을 반환한다.

State state는 컴포넌트에 속하는 객체로 컴포넌트와 관련된 정보를 저장하고 컴포넌트에 의해 관리된다. state 객체가 변경되면 해당 컴포넌트는 리렌더링된다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, World! {this.state.date.toLocaleTimeString()}. ); } } 클래스 컴포넌트에서 constructor를 통해 state를 정의한다. 여기서 super(props)로 항상 상위 생성자를 호출해야한다. 클래스형 컴포넌트에서 특정 메소드를 선언하여 컴포넌트가 마운트되거나 언..

컴포넌트란 독립적이고 재사용 가능한 코드 조각을 말한다. 리액트에는 함수형 컴포넌트와 클래스 컴포넌트가 있다. React는 소문자로 시작하는 컴포넌트는 DOM 태그로 처리하고 사용자 정의 컴포넌트는 항상 대문자로 시작해야 한다. 함수형 컴포넌트 function Welcome(props){ return Hello, {props.name} World! } 자바스크립트 함수 형태이다. 일반적으로 props를 인자로 전달받고 JSX 코드를 반환한다. 여기서 props는 컴포넌트의 속성과 자식을 포함하여 전달되는 단일 객체이다. 또한 props는 읽기 전용으로 취급하여 수정하지 않아야 한다. 따라서 모든 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다. 클래스형 컴포넌트 class We..

CRA는 싱글 페이지 리액트 애플리케이션을 만들어 주는 툴체인이다. 툴체인이란 다른 프로그램을 만드는 데 사용되는 프로그램 개발 툴들의 집합이다. CRA를 사용하면 SPA를 만드는데 가장 좋은 방법이다. CRA은 프론트엔드 빌드 파이프라인만 생성하기 때문에 어떤 백엔드에서도 사용 할 수 있다. CRA Babel과 webpack도 사용한다. CRA 없이 애플리케이션 만들면 좋은점? 웹팩 환경 설정 이해 없어도 리액트 학습하는데 CRA를 사용한다면 문제가 되지 않는다. 프로덕션을 위해 만들어진 것이 아니다. CRA는 환경 설정을 변경하는데 제한하고 불필요한 디펜던시를 가지고 있다. 환경 설정을 커스텀할 수 없고 마이크로 프론트엔드 패턴을 사용할 수 없다. Git 초기화하기 git에서 제외할 파일을 추가하기 ..