[ReactJS로 영화 웹 서비스 만들기] #3.2 setState part Two

//1 => 바꾸고싶은 데이터 counter 라는 데이터를 받아서 사용자들이 보게 될 컴포넌트인 return에 데이터를 담는다.

//2 => 사용자들이 보게 될 부분에 변수를 연결해줌

//3 => counter값을 변경해 줄 함(setCounter)를  Button에 연결하여 호출함

//4 =>  counter의 새로운 값(counter + 1)을 가지고 해당 함수를 호출해 줌

 

React는 코드에서 업데이트되는 부분을 골라서  HTML에서 그 부분만 골라서 고쳐줌

> F12의 console에서 확인하게 되면 정확히 업데이트 되는 부분 > counter의 숫자만 1씩 올라감

 

//1 > React.useState(0); >>  컴포넌트에서 바뀌는 값을 관리하는 함수

 

1. Component란?

 - 리액트로 만들어진 앱을 이루는 최소한의 단위

 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.     반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있       다.
 - 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
 - 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 
   (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

 - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

 - “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 - props와 state 등의 특징들은 따로 정리 하도록 한다.

 

2. 컴포넌트 구성 요소

1) property(props)

 - 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 

2) state

 - 컴포넌트의 상태를 저장하고 수정 가능한 데이터

3) context

 - 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터

3. 컴포넌트의 종류

3-1. 함수형 컴포넌트(Stateless Functional Component)

 

3-2. 클래스형 컴포넌트(Class component)