[React] React 컴포넌트 이해하기

📌 React 컴포넌트 이해하기

React 프로젝트를 처음 만들었을 때 보이는 index.html 파일. <div id="root"> 태그 안에 아무 것도 없다.

react의 컴포넌트를 DOM에 렌더링하는 진입(entry) 파일 index.js

index.html 파일을 보면 'root'를 id로 가진 div가 하나 있다. 그리고 그 안에는 아무 것도 존재하지 않는다. React 는 가상 DOM 기술을 사용하기 때문에, 우리가 작성한 컴포넌트를 DOM에 넣어달라는 명령어를 실행해야 한다. 그래야 빌드가 완료된 후 정상적으로 화면이 보인다.

위에서는 App 컴포넌트를 DOM에 넣어 화면에 보여주겠다는 걸 뜻한다.

---

📖 컴포넌트 기본 구조

💡 이때 컴포넌트가 화면에 보여지는 작업을 렌더링(Rendering)한다고 한다.

//App.js 파일 (App 컴포넌트를 export하는 파일)

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App; //여기 export된 App 함수를 위에서 import해서 사용한다.

기본적으로 컴포넌트라고 부를 수 있는 조건은 아래와 같다.

1. 함수로 구성되어 있으며
2. 반드시 UI 요소를 return 해야 한다.

여기서 UI 요소는 HTML 태그와 거의 똑같다고 보시면 된다. 다만

1. HTML 태그에서 쓰이던 class 속성은 className으로 쓰인다.
2. 컴포넌트를 태그 형식으로 넣을 수 있다.
   예를 들어 Banner라는 이름의 Component를 만들었다면 이렇게 컴포넌트를 넣을 수 있다.

💡 class라는 문법을 사용해서 컴포넌트를 구축할 수 있다. 

---

📖 부모와 자식 컴포넌트

컴포넌트 안에 컴포넌트가 있을 때 위에 있는 컴포넌트를 부모 컴포넌트 아래에 있는 것을 자식 컴포넌트 라고 부른다.

//자식 컴포넌트 (ChildComponent.js)
function ChildComponent(){
	return <h3>나는 자식입니다.</h3>
}

export default ChildComponent;

import ChildComponent from './ChildComponent';
//부모 컴포넌트 (ParentComponent.js)
function ParentComponent(){
	return (
		<div>
			<h3>나는 부모입니다.</h3>
			<div>
				<h1>내 자식을 소개합니다 </h1>
				<ChildComponent />
				<ChildComponent />
			</div>
		</div>
	)
}

export default ParentComponent

---

📖 JSX

React 컴포넌트에서 사용되는 문법 중 jsx가 있다.
react에서 컴포넌트를 만들 때 jsx라는 문법(형식)을 사용한다. 우리가 위의 js 파일에서 HTML 태그를 작성할 수 있었던 건 jsx 문법을 사용하기에 가능하다.

jsx 문법의 대표적인 특징 중 하나로 javasciprt 문법을 태그들 사이에 사용할 수 있다는 것이다. 간편하게 {} 사이에 작성하면 된다.

//사용 예시 1
function SayHelloComponent(){
		const text = "안녕 다마고치야";
		return (
			<div>
				<h3>그랩이 이야기 합니다 : {text}</h3>	
			</div>
		)
}

//사용 예시 2
function SayHelloComponent(){
		const getHelloElement = function(){
			return (
				<h3>그랩이 이야기 합니다 !</h3>	
			)
		}
		return (
			<div>
				{getHelloElement()}
			</div>
		)
}

//사용 예시 3
function SayHelloComponent(){
		const sayHello = function(){
			alert('안녕 나는 그랩이야');
		}
		return (
		 //위에서 배웠던 Callback 함수. 클릭했을 때 sayHello 함수가 실행된다. 
			<div onClick={sayHello}>
				<h3>클릭해보세요</h3>
			</div>
		)
}


export default SayHelloComponent;

🔗 React.JS 강좌 3편 JSX