React 기본 개념

< 목차 >

React란?
React & ReactDOM
Component
클래스형 Component
함수형 Component

1. React란?

React 공식 홈페이지에서는 React를 다음과 같이 정의하고 있다.

"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리"

말 뜻 그대로 React는 JavaScript 라이브러리 혹은 웹 프레임워크라고 생각하면 된다. (라이브러리 보다는 프레임워크에 가깝다고 생각한다.) 라이브러리와 프레임워크의 차이를 간략히 기술하자면 폴더 구조가 없는 형태를 라이브러리, 폴더 구조가 있는 형태를 프레임워크라고 볼 수 있다. 따라서 프레임워크를 사용할 때는 특정 디렉토리 안에서 작업을 해줘야만 하는 특성이 있다.

React는 Facebook에서 제공해주는 오픈소스 JavaScript 라이브러리라고 할 수 있다. 싱글페이지 애플리케이션 (SPA)이나 모바일 애플리케이션을 개발할 때 React를 토대로 개발하는 경우가 많다. 리액트를 사용하지 않고 HTML과 CSS, JavaScript를 이용해서 웹페이지를 만들 수 있지만, 사용자와 상호작용하는 동적인 UI를 만들때 React를 사용하면 좀 더 쉽게 웹페이지를 제작할 수 있다.

2. React & ReactDOM

<!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.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>

    <div id="root"></div>

    <script type="text/babel">

    </script>

</body>
</html>

Create React App을 쓰지 않고 React를 사용해 보기 위해 위와 같은 세팅을 해보았다. React 공식 홈페이지에서 제공되고 있는 CDN 링크를 작성한 것이다.

👉 React.createElement( )

React 문법을 사용해서 엘리먼트를 생성할 때 사용하게 된다.

React.createElement( )는 3개의 인자값을 받는다.

첫번째 인자값은 엘리먼트명 : a, button, input, li, img, ... 등등

두번째 인자값은 속성 : <input type="text"> 와 같이 input 엘리먼트 안에 들어가는 속성

> 참고로 속성이 여러개일 경우에는 object 타입으로 집어 넣으면 된다.

세번째 인자값은 innerHTML의 내용들 : <span>안녕</span> 에서의 '안녕'

React.createElement( )를 통해 다음과 같이 엘리먼트를 생성해서 사용할 수 있다.

React.createElement('button', null, '버튼')
// 아무런 속성을 갖고 있지 않을 때는 null값을 넣어주면 된다.

// 아래와 같이 변수 형태로 만들어서 사용할 수 있다.
const btn = React.createElement('button', {id: 'ingoo', class: 'ingoo2'}, '버튼')

👉 ReactDOM.render( )

첫번째 인자값은 내가 넣을 내용 : React 문법으로 엘리먼트를 생성해서 넣어줘야 한다.

두번째 인자값은 내용을 넣을 위치 : ex) document.querySelector( '#root' )

ReactDOM.render( )를 통해 생성된 엘리먼트를 화면에 랜더링하게 된다.

const btn = React.createElement('button', {id: 'ingoo', class: 'ingoo2'}, '버튼')

ReactDOM.render(
    btn,
    document.querySelector('#root')
)

React.createElement( )를 사용해서 엘리먼트를 생성해도 되지만 JSX를 사용해서 엘리먼트를 생성해도 된다. JSX를 사용하면 JavaScript 영역에서 HTML 문법을 사용해서 엘리먼트를 생성할 수 있다.

React는 JavaScript에 HTML을 포함하는 JSX (JavaScript XML) 라는 문법을 사용한다. 공식문서에 따르면 JSX는 JavaScript를 확장한 문법이라고 소개되어 있다. 따라서 babel을 사용해서 JSX 문법을 사용할 수 있는 환경을 구축해줘야만 한다. (JavaScript 영역에서 HTML 형태로 사용할 수 있도록 하기 위해 babel을 사용한다.) <script type="text/babel"> 형태로 작성해 줌으로써 babel을 사용할 수 있도록 해주면 된다.

+) babel은 JavaScript 컴파일러이다. 문법을 변환하는 용도로 사용된다.

<script type="text/babel">

    const id = 'ingoo'
    const btn = <button id={id}>버튼</button>
    
    ReactDOM.render(
        btn,
        document.querySelector('#root')
    )
    
</script>

3. Component

React는 component 기반의 구조를 가지고 있다. UI를 여러 component로 쪼개서 만들게 되고 한 페이지 내에서도 여러 부분을 독립된 component로 만들고 이러한 component를 조립해서 화면을 구성하게 된다. component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 핸들링 할 수 있다. 쉽게 얘기해서, JavaScript로 만든 HTML 구조를 재활용해서 사용할 수 있도록 해주는 게 component라고 보면 된다.

component를 생성할 때는 클래스 문법을 사용하거나 함수 문법을 사용하게 된다. 결국 JSX의 결과물을 함수나 클래스에 담아서 사용하는 것이 component이다. 결과물을 JSX로 반환해주기 때문에 <App /> 형태로 호출해서 사용하면 된다. 대부분 함수 component를 사용하지만 과거 클래스 형식으로 작성된 component를 가져와서 사용하기 위해서는 클래스 component 역시 알아두는 것이 좋다.

4. 클래스형 Component

위에서 React.createElement( )를 사용해서 button 엘리먼트를 생성했다면 클래스 component를 사용해서 다음과 같이 만들 수 있다.

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

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

우선 extends 문법을 사용해서 React.Component를 상속 받는다. 그 후 render( ) 함수를 선언해주게 된다. render( ) 함수는 최종적으로 화면에 그릴 내용을 넣는 공간이라고 보면된다. React.Component 안에 구현되어 있는 함수이기 때문에 render( )라는 함수명으로만 사용 가능하다.

return 값에는 기본적으로 하나 이상의 상위 엘리먼트가 존재해야만 한다. 따라서 <React.Fragment>를 사용해서 엘리먼트들을 묶어줄 수도 있다. <React.Fragment>가 사용될 경우, 빈 엘리먼트라는 뜻으로 실제 화면상에는 표시되지 않는다. React component가 작동되게끔 하는 가상의 엘리먼트라고 생각하면 된다.

또한, return의 내용이 많을 경우 줄바꿈을 할 수 있도록 괄호를 사용하였다. render( ) 함수의 return값을 보면 알 수 있듯이 결과물을 JSX로 반환해주기 때문에 <App/> 형태로 호출해서 사용하면 된다.

class Hello extends React.Component {
    render() {
        return (
            <span>Hello</span>
        )
    }
}

class World extends React.Component {
    render() {
        return (
            <span>World!!</span>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <Hello /> <World />
            </div>
        )
    }
}

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

ReactDOM은 기본적으로 하나의 component만 실행해주기 때문에 위와 같이 App component 안에서 Hello component와 World component를 실행시켜줘야만 한다.

클래스 component를 사용해서 테이블을 만들어보면 다음과 같다.

<!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>example3</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

        // table 컴포넌트
        class Tables extends React.Component {
            render() {
                return (
                    <table>
                        <Subject />
                        <Content />
                        <Content />
                        <Content />
                        <tr>
                            <Tail />
                        </tr>
                    </table>
                )
            }
        }

        // tail 컴포넌트
        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>
                )
            }
        }


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

        // content 컴포넌트
        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 (
                    <div>
                        <Tables />
                    </div>
                )
            }
        }

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

    </script>

</body>
</html>

5. 함수형 Component

클래스 component는 코드가 실행될 때 실행되는 부분만 가져와서 실행되기 때문에 효율적이다. 함수 component의 경우 클래스 component와 다르게 함수 안의 코드를 전부 실행하게 되지만 접근성 측면에서는 클래스 component 보다 우수하다. 클래스 component와 달리 상속 개념 없이 동작하기 때문이다. JavaScript에서 함수를 선언하고 사용하는 방식 그대로 다음과 같이 사용하면 된다.

<!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.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        const Subject = () => {
            return (
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
            )
        }

        const Tables = () => {
            return (
                <table>
                    <Subject/>
                </table>
            )
        }

        const App = () => {
            return (
                <div>
                    <Tables/>
                </div>
            )
        }

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

</body>
</html>

'React' 카테고리의 다른 글

React - webpack.config.js (0)	2022.04.20
React - Webpack (0)	2022.04.18
React - State 끌어올리기 (0)	2022.04.17
React - 리스트와 Key (0)	2022.04.15
React - Props & State (0)	2022.04.14