React 기초

Heidi·2022년 4월 12일
1

React

목록 보기
1/8

01 리액트는 프레임워크인가 라이브러리인가?

리액트를 검색했을 때,
 구글 : 웹 프레임워크
 공식 홈페이지 : 라이브러리


프레임워크 라이브러리 차이점

ㄴ 라이브러리는 폴더구조가 없음
ㄴ 프레임워크는 폴더구조가 있음


리액트는 크게 4가지 라이브러리로 나뉘고 있기 때문에
프레임워크라고 보는 것이 더 적합하다.


리액트는 상태가 '변경되는 값'만 파악하여 재랜더링 시키는 것이 특징이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>

  <!-- js에서 버튼을 만드는 방법 -->
    <!-- <button>버튼</button> -->

  <!-- 리액트로 버튼을 만드는 방법(원리) -->
  <script type="text/babel">
      const id = 'ingoo2'
      const btn = <button id={id}>버튼</button>

      class App extends React.Component{
        render(){
          return (
            <button>클래스 컴포넌트 버튼</button>
          )
        }
      }

      ReactDOM.render(
        <App />
        ,document.querySelector('#root')
      )


  </script>
</body>
</html>

반대로 js를 사용하면 div 항목 전체가 바뀌는 것을 확인할 수 있다
변경값에 대해서만 변경하는 리액트의 효율성이 더욱 높다는 의미이다.


리액트를 구성하는 4가지의 라이브러리

1) react : react문법이 담겨져 있는 라이브러리
2) react-dom : 변경되는 값을 체크하여 해당 영역만 변경시키는 역할
3) babel : jsx => js영역에서 HTML을 사용할 수 있게 해줌 - 페이스북이 차용해옴
4) webpack - 페이스북이 차용해옴

리액트는 최소 2개의 라이브러리만 있으면, 리액트를 만들 수 있다.


02 ReactDOM.render()

리액트는 SPA(Single Page Application)를 만들기 위해 사용함

ReactDOM.render()

ReactDOM.render(
	<App />  // 첫번째 인자값 : 내가 넣을 내용
    ,document.querySelector('#root')  // 두번재 인자값 : 내가 넣을 위치
)

인자 값이 3개 들어감
(1) 엘리먼트 명 => a, button, input, li 등등
(2) 속성값(object) => input type="text"
(3) innerHTML 내용


03 컴포넌트 종류

컴포넌트는 Element를 함수나, 클래스에 담는 행위로 재활용이 가능한 단위이다.

2가지가 종류의 컴포넌트가 있다
ㄱ) 클래스형 컴포넌트(과거에 많이 사용)
ㄴ) 함수형 컴포넌트(현재 주로 사용)

ReactDOM은 기본적으로 하나의 컴포넌트만 실행함
(컴포넌트는 JSX형식으로 사용한다)


출처 : 리액트 공식문서
ㄴ아래 링크를 불러와야 HTML에서 react를 실행할 수 있다

  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> //react 사용
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> // reactDOM 사용
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> // babel 사용
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>

  <!-- js에서 버튼을 만드는 방법 -->
    <!-- <button>버튼</button> -->

  <!-- 리액트로 버튼을 만드는 방법(원리) -->
  <script type="text/babel">
    //React-dom.render()
    //첫번째 인자값 : 내가 넣을 내용
    //두번재 인자값 : 내가 넣을 위치 => document.querySelector('#root')
    
    //인자 값이 3개 들어감
      //(1) 엘리먼트 명 => a, button, input, li 등등
      //(2) 속성값(object) => <input type="text">
      //(3) innerHTML 내용물 => <span>하이</span>

      // const btn = React.createElement(('button', { id : 'heidi', class : 'heidi2'}, '버튼'))

      const id = 'heidi2'
      const btn = <button id={id}>버튼</button>

      class App extends React.Component{
        render(){
          return (
            <button>클래스 컴포넌트 버튼</button>
          )
        }
      }

      ReactDOM.render(
        <App />
        ,document.querySelector('#root')
      )


  </script>
</body>
</html>

결과값

Class 컴포넌트로 테이블을 구성했을 때,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">

  //tables 컴포넌트
  //subject 컴포넌트
  //content 컴포넌트

    class Tables extends React.Component{
      render(){
        return(
          <table>
            <thead> 
              <Subject />
            </thead>
            <tbody>
              <Content />
              <Content />
              <Content />
              <Content />
              <Content />
              <tr>
                <Tail />
              </tr>
            </tbody>
          </table>
        )
      }
    }

    class Tail extends React.Component{
      render(){
        return(
          <React.Fragment>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </React.Fragment>
        )
      }
    }

    class Subject extends React.Component{
      render(){
        return(
          <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>조회수</th>
          </tr>
        )
      }
    }

    class Content extends React.Component{
      render(){
        return(
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
        )
      }
    }

    class App extends React.Component{
      render(){
        return(
          <Tables />
        )
      }
    }

    ReactDOM.render(
      <App />
      ,document.querySelector('#root')
    )


  </script>
</body>
</html>

함수형 컴포넌트로 테이블을 구성했을 때,

<body>
  <div id="root"></div>
  <script type="text/babel">

    const Content = () => {
      return(
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      )
    }

    const Subject = () => {
      return(
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>작성자</th>
          <th>작성일</th>
          <th>조회수</th>
        </tr>
      )
    }

    const Table = () => {
      return(
        <table>
          <thead>
            <Subject />
          </thead>
          <tbody>
            <Content />
            <Content />
            <Content />
            <Content />
            <Content />
          </tbody>
        </table>
      )
    }

    class App extends React.Component{
      render(){
        return(
          <Table />
        )
      }
    }

    ReactDOM.render(<App />, document.querySelector('#root'))
    
  </script>
</body>

04 webpack이란?

ㄴ 브라우저와 통신하는 여러개의 복잡한 js파일을 단 하나의 js파일처럼 번역해주는 번들
ㄴ 싱글 페이지 어플리케이션을 여러인원이 개발하며 변수명 등이 충돌하는 것을 방지
ㄴ 웹팩 대용으로 Vite가 나왔다
조금 더 공부가 필요한 내용이다.

profile
Heidi
햇님쓰 개발일기장
다음 포스트

React의 Props와 State

0개의 댓글