Component와 State&Props 를 간단하게 알아보자

1.Component

• Component에는 클래스형과 함수형있음.
• 리액트가 레고 라면? 컴포넌트는 블록.
• 웹 사이트의 조각(컴포넌트)을 모아서 웹사이트에 뿌림.

 

HTML을 한 단어로 줄여서 쓸 수 있는 방법

항상 Component는 대문자로

function Modal(){ ←이름 짓고
return (
<div></div> ←원하는 HTML담고
	)
}

return() 내부 묶을때 의미없는 <div>쓰기 싫으면 <> </> ←fragment 문법

 

Component로 만들면 좋은 경우

1. 반복 출현하는 HTML 덩어리들
2. 자주 변경되는 HTML UI들
3. 다른 페이지 만들때도 컴포넌트로 만듦.

 

 

2.State&Props

• props는 사용자가 지정하는 값에 의해 달라지는 컴포넌트의 변수
• state는 컴포넌트 내부에서 사용되는 변수
• 이벤트는 state값을 변경하기위한 행위

 

State

변수 대신 쓰는 데이터 저장공간.

한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정.

let [state 데이터, state 데이터 변경함수] = useState(’초기값’);

 

왜 쓸까?

state는 변경되면 html이 새로고침없이 자동으로 재렌더링.

자주 변경되지 않는 데이터를 저장하고 싶으면 var let const 변수 사용.

 

Props

컴포넌트가 부모 컴포넌트로부터 받아온 데이터

 

State Props 간단하게 이해하기

사장과 직원으로 비유하면 사장: state. 직원: props.

1. state가 일 목록을 만들면
2. prop은 목록에 있는 것을 골라 일을 처리(read only).
3. prop이 새로운 일을 하려면 이벤트를 만들어 state에게 허락을 구함.(event가 실행되었을때 상위컴포넌트에 setState 함수를 통해 상위컴포넌트의 state의 값을 변경할 수 있음.)