React Component

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트(element:요소)를 반환한다.

 

리액트 컴포넌트(블럭, 즉 함수(html을 return하는 함수))를 표현하는 두 가지 방법

1. 함수형 컴포넌트(많이 사용)

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

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

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

2. 클래스형 컴포넌트

 

Component 보는 방법

// 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역
import React from 'react'; 
function App() {
  
	// <---- 자바스크립트 영역 ---->
	const handleClick = () => {
    alert('클릭!');
  };
  
  return (
  /* <---- HTML/JSX 영역  ---->*/
	<div
      style={{
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <span>이것은 내가 만든 App컴포넌트 입니다</span>
      <button onClick={handleClick}>클릭!</button>
    </div>
  );
}
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}
// 내가 만든 컴포넌트를 밖으로 내보내는 영역
export default App;

 

 

주의!

컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.

폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.

 

부모-자식 컴포넌트

컴포넌트 안에 컴포넌트 넣기

컴포넌트는 다른 컴포넌트를 품을 수 있다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.

import React from "react";

function Child() {
  return <div>연결 성공</div>;
}

function Mother() {
  return <Child />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

이렇게 코드를 작성하면 "연결 성공" 문장이 보여진다. 이 파일에서 내보내진( “내보내진” 이라는 것을 export default 라고 하기로 했다.) 컴포넌트는 App 컴포넌트 이기때문에 App 컴포넌트가 화면에 보여진다. 하지만 App 컴포넌트는 GrandFather 컴포넌트를 자식으로 삼고, GrandFather -> Mother, Mother  ->  Child

그래서 결국 자식 컴포넌트에 있는 “연결 성공" 라는 문장이 보여지게 되는 것 이다.