[코드숨] 리액트 13기 -2강/ 1. React

index.js

const element = (
  <div>
    <p>Hello,world</p>
  </div>
);

작성후 npm start 할 경우 error가 남 (jsx가 아니기 때문)

 

해결

1. 파일이름을 .jsx 로 변경

2.webpack.config.js 파일에서 아래 추가

const path = require('path'); //1 추가

module.exports = { 
  entry: path.resolve(__dirname, 'src/index.jsx'), //2 추가

path: 표준라이브러리

__dirname,  :현재 디렉토리 경로, 'src/index.jsx' 결합

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.jsx'),
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

>추후 npm start 하면 오류가 안남

 

---

리액트 설치

npm i react react-dom
npm install react react-dom

npm start

 

1강에서는 React의 DOM객체를 직접만들어서 썼지만

2강에서는 React가 다루는 가상의돔처럼 쓰는 무언갈 만들어서 전체적인 관리를 해주고 ReactDOM이 참고해서 그려줌

---

▼index.jsx (컴포넌트 만들기 전)

import React from 'react'; // 리액트 객체를 얻어서 쓸수있다
import ReactDOM from 'react-dom';

function renderButton(value) {
  return (
    <button type="button">
      {value}
    </button>
  );
}

function renderButtons() {
  return (
    <p>
      {[1, 2, 3].map((i) => (
        renderButton(i)
      ))}
    </p>
  );
}

const element = (
  <div>
    <p>Hello,world</p>
    <p>Hi</p>
    {renderButtons()}

  </div>
);

ReactDOM.render(element, document.getElementById('app'));// ReactDOM을 이용해 그려줌

 

▼ index.jsx(컴포넌트 만든 후)

import React from 'react'; // 리액트 객체를 얻어서 쓸수있다
import ReactDOM from 'react-dom';

function Button({ children }) {
  return (
    <button type="button">
      {children}
    </button>
  );
}// 첫글자는 대문자

function Buttons() {
  return (
    <p>
      {[1, 2, 3].map((i) => (
        <Button key={i}>
          {i}
        </Button>
      ))}
    </p>
  );
}

function App() {
  return (
    <div>
      <p>Hello,world</p>
      <p>Hi</p>
      <Buttons />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));// ReactDOM을 이용해 그려줌

 

 

---

< 강의 내용 >

React

• React 공식 사이트
• 리액트의 탄생배경과 핵심 개념

A JavaScript library for building user interfaces

React는 UI들을 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 개발할 수 있는 컴포넌트로 만들 때 도움을 주는 라이브러리 입니다.

리액트는 재사용이 가능한 컴포넌트를 만들고, 이 컴포넌트들이 모여 웹사이트를 구성하게 됩니다. 이 컴포넌트들은 결국 자바스크립트 함수(또는 객체)입니다. state를 세팅하고, 이를 기반으로 화면에 어떻게 보여지기 원하는지를 작성하여 하나의 컴포넌트로 구성합니다.

이후 리액트에 내장된 Component 라이브러리의 기능을 불러온 후, 여기에 내장된 render() 메소드를 통해 ReactDOM 라이브러리에게 rendering될 컴포넌트를 전달합니다. 최종적으로 ReactDOM 라이브러리가 현재 DOM과 전달받은 컴포넌트를 비교하여 변경이 필요한 부분만 변화를 주어 화면에 보여주게 됩니다.

ReactDOM

• React 공식 사이트

react-dom은 React에서 DOM에 특화된 메서드를 사용할 수 있도록 API를 제공합니다. 예를들면 React요소들을 DOM으로 렌더링하는 render함수를 제공합니다.

// index.html

// ...
<div id="app"></div>
<script id="main.js"></script>
// ...

// JSX를 React.createElement가 컴파일 할 수 있도록, React를 직접 사용하지 않더라도 임포트 해줘야 됩니다.
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <p>Hello, world!</p>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app'),
);

• 엘리먼트 렌더링

Components & Props

• Components and Props

이번 교육 과정에서는 함수 컴포넌트로 모든 컴포넌트를 작성할 예정입니다. 리액트 훅이 나오면서 특수한 케이스를 제외하곤 앞으론 함수 컴포넌트로 개발할 것을 페이스북 측에서도 권하고 있습니다.

컴포넌트도 자바스크립트 함수입니다. 그래서 입력값과 반환값이 있습니다. 여기서 입력값을 리액트에서는 props라고 부릅니다. 컴포넌트의 반환값은 화면에 어떤 엘레먼트를 보여줄지 결정합니다.