Component & state & props

React Component, state, props에 대해 처음 공부하시는 분에게 설명한다고 생각하고 쓴 글입니다. 

 

 

 

컴포넌트(component) 

컴포넌트(component) 컴포넌트는 말 그대로 구성요소예요!   리액트로 만든 웹사이트는 컴포넌트들의  합으로 되어있어요  

더 쉽게 생각하면   컴포넌트는 일종의  ‘조각’이라고 보시면 돼요. 큰 조각도 있고  작은 조각들도 있고 다양한 크기의 조각들이 합쳐져  하나의 화면을 구성해요

그림1

리액트로 웹사이트를 만든다면 위 사진 <그림1>  처럼 조각조각 화면을 쪼개서 만들 수 있어요!  

부모 컴포넌트를 큰 조각   자식 컴포넌트를 작은 조각으로 생각하시면 돼요 ! 

 

 

Q .이렇게 화면을 잘게 쪼개서 만들면 뭐가 좋을까요 ?  

A. 바로 재사용성이 높아져요  .

 

만약  

다른 화면을  만드는데 내비게이션 바  (work, Approch등이 있는 부분)가 또  필요하다면   

<그림1>의 자식컴포넌트 1를 다시 사용하면 돼요 !! 

 

 

 

 

 

 

 

 

 

2. props    

 Props는  property의 약자로   자식 컴포넌트가   부모 컴포넌트로부터 물려받는 속성입니다 !!  

 (부모 컴포넌트에서 전달하는 props가 바뀌면  자동으로 업데이트 됩니다) 

 

<그림3>을 보시면 App02(부모컴포넌트)는  UserName(자식컴포넌트)에게  name이라는 속성(props)을  주었습니다.  name 속성(props)의 값은 userName입니다 !!  

 

 

 

이렇게 하위컴포넌트로 보내준 name이라는 속성은 아래 <그림4> 처럼 물려받아서  사용합니다 ! 

 

 

 

 

3. state

 

State는 해당 컴포넌트에만 적용되는 ‘상태’입니다. 

State는  컴포넌트 내에서 관리되는 값이에요 .  

 

 

React 공식문서

props는 (함수의 매개변수처럼) 컴포넌트에  전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.