React의 기본 개념

< 목차 >

1. 리액트

2. React, React-dom

3. 컴포넌트(class, 함수)

 

 

1. 리액트란?

 

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 

 

리액트는 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

 

 

먼저 리액트를 사용하기전 기본 세팅을 보도록 하자

 

이런식으로 리액트를 사용하기 전 기본 세팅방식을 가지고 있다.

 

2-1. React.createElement( ) ->

 

React 문법의 기초 문법이고 이 문법을 사용해서 엘리먼트를 생성할 수 있다. 

React.createElement( ) 는 인자값을 3개 가지고 있다.

 

 

첫 번째는 사용할 엘리먼트 명을 적는다  ex) a, button, input, li... 

 

두 번째는 속성값을 넣는다 ex) <input type='text'> 를 넣는 것과 같이 input 엘리먼트 안에 있는 속성값에 해당하는 것을 넣어주면 된다. 두 번째 인자값에 속성은 여러개를 넣을 수 있는데 그 방법으로는 객체형식(object)으로 넣으면 된다.

ex) {id:'ingoo', class:'blockchain'}

 

 

세 번째는 innerHTML의 내용을 넣으면 된다. ex) <span>하이</span> 이 내용에 있는 '하이'를 넣는 것.

 

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

// 변수 btn에 담아서 사용할 수 있다

 

 

 

 

2.2 ReactDOM.render( )

 

ReactDOM.render( )를 통해서 생성된 엘리먼트를 화면에 랜더링 할 수 있다.

 

이 친구는 두 개의 인자값을 가지고 있는데

 

첫 번째 인자값은 내가 넣을 내용, 즉 위에서 했던 React 문법으로 엘리먼트를 생성해서 넣어주면 된다.

 

두 번째 인자값은 내가 넣을 위치를 지정해줘야 한다. 우리는 id가 root인 div 엘리먼트에 넣을 것이다.

-> document.querySelector('#root')

 

const btn = React.createElement('button',{id:'ingoo',class:'ingoo2'},'버튼')
 
ReactDOM.render(
    btn
    ,document.querySelector('#root')
)

 

 

 

React.createElement를 쓸려고하면 워낙 내용들이 많다보니 쓸 것도 많고 헷갈리는 경우들이 생긴다. 이를 좀 더 쉽게 사용하기 위해서 JSX (Javascript XML) 라는 것을 사용해보자.

 

JSX 문법은 Javascript 영역에서 HTML 문법을 사용할 수 있게 해주는 용도이다.

 

JSX 문법을 사용하기 위해선 자바스크립의 환경도 따로 설정을 해줘야 하는데, 그것이 바로 babel이다.

평상시에 우리는 <text/javascript> 를 이용해서 HTML에 내에 자바스크립를 쓸 수 있었다. 여기서 우리는 살짝 바꿔서

<text/babel>로 바꿔서 사용하면 바로 babel 환경으로 설정이 된다.  <--- 이거 잊지 않도록 유의하자!!

  const btn = <button id={id}>버튼</button> // babel을 이용해서 이렇게 간단하게 react를 사용할 수 있다. 이놈들은 HTML처럼 생겼지만 javascript이다
        ReactDOM.render(
            btn
            ,document.querySelector('#root')
        )

 

 

 

 

3. Component

 

컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위를 말한다. Javascript로 만든 HTML 구조를 재활용해서 사용할수 있도록 해주는 것.

 

 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.

 

 - 컴포넌트는 class형 컴포넌트와 함수형 컴포넌트로 나눈다.

 - 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 
   (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

 

 - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

 

 - “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

 - props와 state 등의 특징들은 다음 블로그 내용에서 정리하도록 하겠다.

 

3-1 Class형 Component

 

class App extends React.Component {
            render(){ // render 함수 선언
                      // render 함수는 화면에 최종적으로 그릴 내용을 넣는 공간이라고 보면 된다.
                return(
                    <button>클래스 컴포넌트 버튼</button>
                )
            }
        } 

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

 

extends를 사용해서 React.componenet를 상속 받는다. 그 후 render() 함수를 선언.

 

return 값에는 기본적으로 하나 이상의 상위 엘리먼트가 존재해야한다(부모) 혹시라도 상위 엘리먼트를 직접 쓰기 싫은 경우에는 <React.Fragment>를 사용해서 엘리먼트를 묶어줄 수 있다. <React.Fragment> 는 빈 엘리먼트라는 듯으로 실제 화면상에는 표시되지 않지만 React component가 작동하게끔 하는 역할이다.

 

이런식으로 class형 component를 활용할 수 있다. 

ReactDOM은 기본적으로 하나의 컴포넌트만 실행할 수 있기 때문에 저런식으로 표현을 해야지 다 담을 수 있다.

 

 

그러면 Class함수형을 이용해서 테이블 구조를 만들어보자.

 

  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(){
                // Fragment == <></>
                return(
                    <React.Fragment> 
                        <td>꼬릿말</td>
                        <td>꼬릿말</td>
                        <td>꼬릿말</td>
                        <td>꼬릿말</td>
                        <td>꼬릿말</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>

아래는 렌더링된 화면이다.

 

 

 

3-2 함수형 Component 

 

함수형 Component는 가장 간단하게 컴포넌트를 정의하는 방법이다. Javascript에서 사용하는 함수선언처럼 사용하면 된다.