브래의 슬기로운 코딩 생활

State State란? •리액트 컴포넌트의 상태 •리액트 컴포넌트의 변경 가능한 데이터 •state는 컴포넌트를 개발하는 개발자가 직접 정의 State 정의할 때 주의사항 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 -state가 변경될 경우 컴포넌트가 재렌더링 됨 -렌더링이나 데이터 흐름과 관련 없는 값을 포함하면 불필요한 렌더링이 발생하여 성능 저하 -그외 값은 컴포넌트의 인스턴스 필드로 정의 State 정의 •클래스 컴포넌트 - 생성자(constructor)에서 state 정의 •함수 컴포넌트 - useState()라는 훅을 사용해서 정의 State의 특징 •state는 정해진 형태가 있는 것이 아니라, 일반적인 JavaScript 객체 •state는 정의된 이후 자바스크립트..

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