모두 리액트의 중요한 컨셉이며 알파이자 베타이며 오메가이다.

1. Component

특정 기능을 하는 재사용 가능한 최소한의 UI

• 리액트는 여러 개의 Component를 조합하는 방식으로 앱을 구성한다.
• Component는 특정 기능을 하는 재사용 가능한 최소한의 UI를 말한다.
• 예를 들어 DeleteButton.tsx라는 파일 속 DeleteButton Component는 어떤 버튼을 누르면 무언가를 삭제시키는 것이 그 Component의 역할이 될 것이다.

2. State

유동적인 데이터를 담는 변수

• 리액트는 SPA트렌드의 라이브러리로 유저의 인터랙션이 있을 때 그 반응에 의해 즉각적인 데이터 변경이 있어야 한다.
• 따라서 일반적인 변수는 값이 고정되어 있기에 이 컨셉에 적합하지 않다.
• State는 유동적인 데이터를 담는 변수로 유저의 인터랙션이 있을 때 설정해놓은 setter함수로 state의 값을 갱신시켜 유저에게 수정된 값을 보여준다.

3. Prop

값 전달 매개체

1) Prop이란?

• 리액트의 컨셉은 Component의 조립이라고 했다.
• Component로 앱을 구성하다 보면 부모 Component에 있는 값을 자식 Component에 전해주어야 할 경우가 있다.
• 이럴 때 전달해주는 매개체가 Prop이다.
• 특히 state를 자식 컴포넌트에게 넘겨주는 경우가 많다.

2) 상태 관리 라이브러리를 쓰는 이유

• 그런데 만약 state를 넘겨받아야 하는 자식 컴포넌트가 부모로부터 4~5단계 건너있는 경우라고 생각해보자.
• 그 사이에 있는 Component들은 해당 값이 아무런 필요가 없음에도 단지 전달의 목적으로 이를 받아야 된다.
• 1~2단계까지는 Prop으로 넘겨줄 수 있더라도 그 이상이 되는 순간 굉장히 비효율적이라고 볼 수 있는데 이를 해결하는 것이 Redux나 Recoil같은 상태관리 라이브러리이다(State Management 자세한 내용은 링크 확인).

4. 생각

• (앵귤러나 뷰같은 것을 사용해보지는 않았지만)React를 써보면서 느낀 점은 기능별로 파일(컴포넌트)을 나누면 된다는 것이 굉장히 좋은 컨셉인 것 같다는 것이다.
• 파일 관리도 수월해질 뿐더러 기능을 함수처럼 활용하면 되는 느낌이었다.
• Component에 어떤 값을 Prop으로 넘겨주는 컨셉이 바닐라 자바스크립트로 치면 함수에 argument를 넘겨주는 느낌이었달까
• 그 값에 따라 계산을 해서 결과값을 배출하는 로직이 크게 다를 것이 없다고 느꼈다.