성빈

목차 리액트 상태 예제 (별점 프로젝트: StarRating, Star 컴포넌트 구성) 컴포넌트 상태와 상태 변경을 위한 useState() 컴포넌트 트리 예제 (색상 관리 앱) 폼 만들기 (참조 : ref) 리액트 상태 상태 (state) 리액트 컴포넌트의 데이터를 표현하는 객체 컴포넌트 내부에서 변경될 수 있는 값 ※ state와 props와의 차이점 리액트 컴포넌트에서 속성 (property)을 나타내는 데이터 컴포넌트의 매개변수로 전달받은 데이터 구조를 분해하면서, 데이터를 활용했었다. 읽기 전용 (변경 불가능) → 값을 전달하는 부모 컴포넌트에서 설정하고, 컴포넌트 자신은 읽기 전용으로만 사용된다. → 컴포넌트는 컴포넌트 외부의 데이터인 props를 수정하지 않는다. (순수함수의 개념 : sid..

목차 JSX Babel JSX 활용 예제 : Recipe React Fragments 웹팩 프로젝트 구성하기 JSX를 사용하는 리액트 JSX 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 JavaScript의 확장 문법 (JavaScript XML) HTML 코드를 작성하는 방법과 유사 JSX는 자바스크립트이므로 자바스크립트 함수 안에서 JSX를 직접 사용할 수 있다. 직관적이고 가독성이 좋음 element를 객체로 다루며, 표현식 포함 가능 변수 할당, 매개변수 전달, 함수 반환 등 일반 JavaScript 표현식으로 활용 가능 ○ 리액트 엘리먼트 표기 React.createElement(IngredientsList, {id:"1", ...}, chil..

목차 React element 생성 ReactDOM 렌더링 React 컴포넌트 1) 함수형 컴포넌트 2) 클래스 컴포넌트 페이지 설정 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React : 사용자 인터페이스 뷰를 만들기 위한 라이브러리 ReactDOM : UI를 브라우저에 렌더링할 때 사용하는 라이브러리 아래 설정은 브라우저에서 리액트를 사용하기 위한 최소한의 요구 사항이다. React element와 ReactDOM React element HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어들이면 DOM 엘리먼트가 되고, 이 DOM이 사용자 인터페이스를 화면에 출력한다. React.createElement(type, [props], [...c..