요약

1. 컴포넌트의 개념을 이해할 수 있다.
2. 부모 자식 컴포넌트를 이해할 수 있다.
3. JSX 문법이 무엇인지 알 수 있다.

React Component

컴포넌트란

• 컴포넌트를 통해 개별적인(=독립적인) 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
• 컴포넌트는 JS의 함수(input-output)와 유사함
• props(input)라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시 되는지를 기술하는 React엘리먼트(output)를 반환함

리액트 컴포넌트를 표현하는 두 가지 방법

• 클래스형이 먼저 나왔으나 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장함.
• 함수형 컴포넌트가 훨씬 쉽고 많이 사용하게 됨.

1. 함수형 컴포넌트

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

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

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

2. 클래스형 컴포넌트

// 이런게 있다 정도로 참고만 하기
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React에서 말하는 Component는 함수를 말한다.
Component를 만드는 것은 html(JSX)을 return하는 함수를 만들면 된다.

Component 보는 방법

• 컴포넌트 밖에서는 내가 필요한 파일을 import
• export default 기능을 통해 내가 만든 컴포넌트를 밖으로 내보냄
• 컴포넌트는 항상 들여오거나 내보낸다고 이해하자

// 내가 필요한 파일을 import를 사용해 가져오기
// im : 안쪽 + port : 항구 = 안쪽 항구로 들여온다(수입)
import "App.css";
function App() {
  // 아래부터는 자바스크립트를 쓸 수 있는 영역 (function 아래, return 위에)
  return (
    // html처럼 생긴 부분을 작성하는 곳 - JSX문법(JavaScript + XML - HTML)
    // JSX 문법에서 자바스크립트를 사용하려면 {} 안에 작성할 수 있다.
    <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'
        >
          Lean React
        </a>
      </header>
    </div>
  );
}
// 내가 만든 컴포넌트를 export default를 사용하여 밖으로 내보내기
// ex(out) : 바깥쪽 + port : 항구 = 바깥쪽 항구로 내보낸다(수출)
export default App;

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

• 폴더 : 소문자로 시작하는 카멜케이스로 작성
• 컴포넌트를 만드는 파일 : 대문자로 시작하는 카멜케이스로 작성

부모 자식 컴포넌트

부모 자식 컴포넌트의 개념

• 컴포넌트 안에 컴포넌트, 그 컴포넌트 안에 컴포넌트... = 부모 - 자식 - 자식 - 자식...
• 계층을 갖는, 위-아래 상하관계를 갖는 컴포넌트의 관계
• 부모 컴포넌트: 다른 컴포넌트를 품는 컴포넌트
• 자식 컴포넌트: 다른 컴포넌트 안에서 품어지는 컴포넌트

// src/App.js
import React from "react";

// 원래는 이렇게 되어있던 것을 부모 자식 컴포넌트로 빼놓은 형태가 아래의 형태
function App() {
  return <div>나는 자식입니다.</div>;
}

// App 파일에 품어지는 자식 컴포넌트 Child 파일
function Child() {
  // return 뒤에 붙는 반환값이 한줄이면 괄호 생략가능
  return <div>나는 자식입니다.</div>;
}
// 주가 되는 파일 - Child 컴포넌트를 품고 있는 부모 컴포넌트 App 파일
function App() {
  // Child 컴포넌트를 품고 있음
  return <Child />;
}

// 밖으로 내보내는 App.js 파일
export default App;

• 리팩토링 진행
  코드가 길어지면 일정 로직을 따로 떼어서 컴포넌트화 시켜 사용하게 되는데, 반복되는 로직이 생길 경우 효율적으로 사용할 수 있다.

예시

• JSX 문법 살짝 추가

1. return문 아래에 멀티라인으로 붙을 경우 소괄호 안에 꼭 넣어줘야한다.
   (싱글라인이면 괄호 생략 가능)
2. return문의 가장 상단(최상위 태그)에는 태그가 하나만 들어올 수 있다.
3. 상단태그에 < div > 태그가 들어올 수도 있지만 < > 빈 태그도 들어갈 수 있다.

import React from "react";

function App() {
  // return문 뒤에 멀티라인으로 붙을 경우 소괄호 안에 꼭 넣어줘야한다.
  return (
    <div>나는 자식입니다.</div>;
    <div>나는 자식입니다.</div>;
    <div>나는 자식입니다.</div>;
    <div>나는 자식입니다.</div>;
    <div>나는 자식입니다.</div>;
    );
  // 이렇게 만들면 오류! -> return문의 가장 상단에는 태그가 하나만 들어올 수 있다.
}

// 5개의 div를 하나의 div 태그로 묶어주거나
function App() {
  return (
    <div>
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
     </div>
    );
// 빈 태그로도 묶어줄 수 있다. -> 크롬브라우저 안에서 해석은 따로 되지 않음
function App() {
  return (
    <>
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
      <div>나는 자식입니다.</div>;
     </>
    );

export default App;

• 이렇게 반복적으로 동일하게 사용될 경우 리소스가 낭비되기 때문에 하나의 컴포넌트로 묶어 사용하면 훨씬 효율적으로 코드를 작성할 수 있다.

import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return
    <>
      // 나중에는 이 부분도 JS로 5번 출력해주는 형식으로 작성할 수 있다.
      <Child />;
      <Child />;
      <Child />;
      <Child />;
      <Child />;
    </>
}

export default App;

JSX(JavaScript + XML)

JSX의 정의

• JavaScript를 확장한 문법(JavaScript의 모든 기능이 포함되어 있음)
• 리액트에서는 딱 한의 html파일만 존재함(public폴더 아래에 있는 index.html)
• JSX 문법을 사용해서 React요소를 만들고 DOM에 렌더링 시켜서 뷰를 그림

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

예시

• JSX에서 쓰는 < div >~~< /div >는 DOM 요소가 아닌 React요소!
• 리액트 돔을 구성하는 것은 리액트 요소, 돔을 구성하는 것은 돔 요소 정도로 알아두자

// 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.
<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>
// 그래서 나온 게 JSX
// 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있음 
const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

React Snippet(rfce, rfc)

• VSCode의 Extension에서 "ES7+ React/Redux/React-Native snippets" 설치 후 rfce 나 rfc를 입력하면 사용 가능
• rfce: function 키워드가 들어간 묶음을 만들 수 있다.

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

• rfc: export default가 함께 들어간 function 묶음을 만들 수 있다.

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

JSX문법

1. 닫는 태그는 무조건 있어야 한다.
2. return문의 가장 상단(최상위 태그)에는 태그가 하나만 들어올 수 있다.
3. JSX 문법에서 자바스크립트를 사용하려면 {} 중괄호 안에 작성할 수 있다.
   (배열 메서드도 사용 가능)
4. return문에 멀티라인이 들어갈 경우 () 소괄호 안에 작성해야한다.
5. 주석은 중괄호 안에 Ctrl+/ 로 사용할 수 있다.
6. JS와 달리 class를 넣으려면 className을 적어야한다.
7. style 사용 시 안에 JS객체를 넣어줘야 한다.
8. 태그에 직접적으로 넣는 인라인으로 먹여줄 수도 있고, 변수로 선언하여 사용할 수도 있다.

예시 1

import React from 'react'

export default function App() {
  // 여기에 자바스크립트 사용 가능
  const a = 3;
  const b = 7;
  const testArr = [1, 2, 3]
  
  // 4.return문에 멀티라인이 들어갈 경우 () 소괄호 안에 작성해야한다.
  return (
    // 2.return문의 최상단에는 태그가 하나만 들어올 수 있다.
    <div>
      // 1.닫는 태그는 무조건 있어야함
      <input type='text' />
      // 3.JSX 문법에서 자바스크립트를 사용하려면 {} 중괄호 안에 작성
      <div>안녕하세요 {a + b}입니다.</div>;
      // map 함수도 사용 가능
      {testArr.map}
    </div>
  )
}

예시 2

• p 태그는 paragraph의 약자로 뜻은 '단락, 절'인데, 단락, 문단을 구분하기 위한 용도로 사용한다.

import React from 'react'

export default function App() {
  const number = 1;
  return (
    // 6.JS와 달리 class를 넣으려면 className을 적어야한다.
    <div className="test-class">
      <p>안녕하세요 리액트입니다.</p>
      {/* 5.주석은 중괄호 안에 Ctrl+/ 로 사용할 수 있다. */}
      {/* 삼항연산자 사용해보기! 조건 ? 참이면 왼쪽:거짓이면 오른쪽 */}
      // 7.style 안에 JS객체를 넣어줘야 한다.
      <p style={// JS문법이기 때문에 첫 번째 {} 사용
          {// Js 객체로 넣어야하기 때문에 두 번째 {} 사용
            color: "red", // css처럼 key-value 형태로 넣어준다.
          }
        }>
        {number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다'}
      </p>
    </div>
  )
}

예시 3

import React from 'react'

export default function App() {
  const number = 1;
  // 8.style을 pTagStyle 라는 변수로 선언하고
  const pTagStyle = {
            color: "red",
          };
  return (
    <div className="test-class">
      // 변수로 선언한 style을 중괄호 안에 넣어 사용할 수 있다.
      <p style={pTagStyle}>안녕하세요 리액트입니다.</p>
	  // 지정한 변수로 재사용도 가능하다.
      <p style={pTagStyle}>
        {number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다'}
      </p>
    </div>
  )
}

느낀 점

JSX에 JS가 포함되어 있어 비슷하긴 하지만 생각보다 문법이 좀 더 까다로웠다. 컴포넌트를 만들 때 첫문자는 꼭 대문자를 써야하는 것이나 JS를 사용할 때는 {}를 꼭 써줘야하는 것이나 익숙해지면 괜찮아지겠지만 현재로서는 헷갈리는 부분이 많아 JSX를 자주 사용해봐야할 필요성을 느꼈다. 아직 자바스크립트도 이해하지 못한 부분이 많지만 그래도 비슷한 부분도 있기에 같이 공부하면 더 좋을 것 같다는 생각이 들었다.