리액트 컴포넌트 개념과 State,Props

React Component
UI 또는 기능을 부품화해서 재사용이 가능해진다. 그렇지 않으면 하나하나 다 만들고.. 중간에 데이터를 바꿔야 하거나 스타일,속성을 바꿔야 할 때 일일이 찾아서 수정해야하는데 컴포넌트는 그럴 필요가 없다! 원본 하나로 여러 컴포넌트를 통제할 수 있어서 틀은 한 번만 만들면 되고 그 안의 데이터만 바꾸면 된다.

->이 때 리액트 컴포넌트에서는 변수를 const와 let이 아닌 state로 선언한다.
->컴포넌트는 클래스형, 함수형으로 종류가 나뉘는데 원래는 클래스형만 쓰다가 편리성을 위해 함수형으로 간결하게 발전되었다. 객체지향 방식을 제대로 알지 못해도 쉽게 구현할 수 있는게 장점이라고 본다.

State
리액트는 변수의 상태를 바꿔주는 기능을 편리하게 구현할 수 있도록 도와주는데, 이 때 사용되는게 state이다.

사용방법은 다음과 같이 []안에 선언한다.

const [state, setState] = useState(초깃값);

state에 컴포넌트에서 사용할 변수 이름을 넣고,
setState는 컴포넌트에서 사용할 변수를 바꿔주는 역할이다. set변수이름 으로 정해두면 한 눈에 알아보기 쉽다.
useState는 컴포넌트에서 사용할 변수를 만들어준다. 이때 괄호 안에 초깃값을 지정해주거나 ""로 비워둘 수도 있다.

useState처럼 리액트에서는 use로 시작하는 편리한 도구들을 제공한다. 원래는 컴포넌트를 만들 때 클래스형으로 만들었으나 점차 훨씬 간결한 함수형으로 바뀌고 있는 추세다.

Props

부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수,함수를 props라고 한다
객체 형태로 presenter에 전달된다

사용방법은 기능을 담당하는 container 영역에서 다음과 같이 선언한다.

key이름={함수나 변수 이름}

그러고 나서 화면을 보여주는 presenter에서 props를 인자로 받아 props.key 으로 불러온다.
이름을 지을 때 일반적으로는 key이름과 함수/변수 이름과 동일하게 지정한다.

//container
handleChange={handleChange}

//presenter
props={handleChange:handleChange};

이때 react는 데이터 흐름은 단방향 구조이기 때문에 부모→자식 물려주기만 가능하다. 자식 컴포넌트에서 부모 컴포넌트로 함수나 변수를 물려주는 것은 안된다.

컴포넌트와 props는 얼핏 보면 비슷한데 컴포넌트는 하나의 부품으로 UI를 재사용 가능하도록 만들거나 함수(기능)을 재사용 가능하도록 만들 수 있다. props는 수정이 불가능하고 읽기 전용이라는 것이 특징이고 함수 역할을 한다고 볼 수 있다.
참고 링크: https://ko.reactjs.org/docs/components-and-props.html