프로젝트 : 카운터 앱 구현 + TailwindCSS 우선순위 설정 x 하는 방법

{ 컴포넌트 구조도 }

리액트에서는 부모와 자식 관계에서만 props로 상태를 전달할 수 있음(2개 이상의 컴포넌트 간 데이터 전달 방식 : props), 따라서 부모 컴포넌트를 공유하고 있는 형제 컴포넌트들끼리에서는 props를 사용할 수 없음 / 오직 부모-자식 트리구조에서만 사용이 가능!

따라서, count 상태는 Viewer 컴포넌트에게 Controller 컴포넌트에게는 이벤트 핸들러를 전달해야 함

 

1. 리액트에서 화면을 구성할 때, 여러 개의 컴포넌트들이 서로 부모와 자식 관계를 이루며 계층 구조를 형성함

2.  특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다는 점 / 그렇기에 하나의 상태를 여러 컴포넌트에서 관리하게 될 경우, 이 상태는 반드시 컴포넌트들의 공통 부모가 되는 곳에 만들어야 된다는 점

=> 상태를 계층 구조상에서 위로 끌어올려서 그 아래에 있는 컴포넌트들이 모두 공유할 수 있도록 만드는 이러한 방법을 "state lifting(state 끌어올리기)" 이라고 합니다.

 

결론적으로, 리액트에서는 props라는 기능을 이용하여 부모에서 자식 방향으로만 데이터를 전달할 수 있음 / 그렇기에, 데이터들은 항상 위에서 아래로 하나의 방향으로만 흐르게 

 

단방향 데이터 흐름 : 위에서 아래로만 데이터가 전달되니 파악하기가 쉽고 매우 직관적이라는 장점이 존재

 

{ 😎 VS code 익스텐션인 Prettier를 사용중일 때, settings.json에서 tailwindcss 스타일 우선순위 적용을 제외하는 방법 }

터미널에 아래와 같이 입력하여 TailwindCss 우선순위 적용을 제거함

npm uninstall prettier-plugin-tailwindcss