Over view

복잡한 앱에서 index.js에 모든 기능을 다 넣으면 코드의 가시성도 떨어지고, UI의 재사용이 어려워짐 → 각각의 기능을 컴포넌트로 잘라내고 조합하여 앱을 구성하는 것이 리액트의 기본

컴포넌트는 한 화면에 여러 개를 배치할 수도 있고, 계층 구조로 구성 가능 페이지를 컴포넌트화하면 코드의 단순성을 유지하기 쉬워짐

컴포넌트를 뒷받침하는 기본 개념 - Props와 State

Props와 State는 모두 컴포넌트에서 값을 다루는 방식이지만, 목적이 다름

image.png

Props가 컴포넌트에 매개변수를 전달하기 위한 인수라면, State는 컴포넌트 내의 상태를 나타내는 변수

컴포넌트에서는 Props에서 외부로부터 값을 받고, 이후 시시각각 변하는 상태를 State에서 관리하는 것이 기본

함수의 키워드로 표현하자면 Props는 임시 인수, State는 로컬 변수로 표현

Props의 기본

image.png

myName을 Props로 받아 메시지를 출력하는 MyHello 컴포넌트

받은 Props 값은 ‘props.이름’ 형식으로 접근

image.png