[React] 컴포넌트(Component)

 React Component 

• 컴포넌트 = 블럭 = 함수
• 컴포넌트를 만들어 보세요 = html을 return 하는 함수를 만들어 보세요
• 컴포넌트의 가장 첫 글자는 대문자로!!
• 컴포넌트로 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음
• 컴포넌트는 JavaScript 함수와 유사함
• 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환(return)
• return() 안에 최상위 태그는 하나만 있어야 함 (빈태그 <></> 도 가능!)
• 함수형 컨퍼넌트가 클래스형 컴포넌트 보다 사용도가 높음
• 함수형 컴포넌트 형식

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

 

 component 보는 법 

 

 부모-자식 컴포넌트 

• 컴포넌트는 다른 컴포넌트를 품을 수 있음
• 부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트
• 자식 컴포넌트 : 다른 컴포넌트 안에서 품어지는 컴포넌트
• return 부분을 '컴포넌트화' 시켜서 자식 컴포넌트로 만듦
• return이 한 줄이면 () 없어도 되지만, 멀티라인이면 () 필수!
• 반복되는 로직이 생길 경우에 필요함!