본문 바로가기
프로그래밍/react

[220413] 리액트 시작하기 (react, react-dom, 컴포넌트)

by 한코코 2022. 4. 15.

사전지식

자바 프레임워크라고도 부르고, 자바 라이브러리라고 부르는 리액트.

조금 자세히 따지자면 프레임워크에 가깝다.

라이브러리 :  폴더 구조가 없음

프레임워크 : 폴더 구조가 있음

 

 

1.   react 시작하기

react는 react문법을 사용해서 작성한다.

react-dom은 바뀐 값을 찾아서 그 영역만 바꿔준다. 주로 맨 마지막 한줄만 사용함

<head>
    //react를 사용하기 위한 코드
    <script crossorigin src="http://unpkg.com/react@17/umd/react.development.js"></script> <!--객체-->
    //react-dom을 사용하기 위한 코드
    <script crossorigin src="http://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <!--객체-->
</head>

<body>
	<div id="root"></div>
    <script type="text/javascript">
        // 이 곳에 작성한다.
        // react : react 문법. 주로 사용하는 애
        // react-dom : 뭔가 중요한 애, 바뀐 값을 찾아서 그 영역만 바꿔줌. 맨 마지막 한줄만 사용함.

        // ReactDOM.render()
        // 첫번째 인자값 : 내가 넣은 내용 -> 리액트 문법을 사용해서 만들어야함
        // 두번째 인자값 : 내가 넣을 위치
    </script>
</body>

 

 

1-1. react 문법

<button>버튼</button>을 리액트로 만드는 코드

//인자값 3개 들어가는 React.createElement()
//첫번째 인자 : 엘리먼트 명
//두번째 인자 : 속성값
//세번째 인자 : innerHTML
React.createElement('button', null, '버튼')

 

1-2. react-dom 문법

//ReactDOM.render()
//첫번째 인자값 : 내가 넣은 내용 -> 리액트 문법을 사용해서 만들어야함
//두번째 인자값 : 내가 넣을 위치 

ReactDOM.render(
    // 속성값 여러개 넣는 방법
    React.createElement('button',{id:'ingoo', class:'ingoo2'},'버튼')
    ,document.querySelector('#root')
)

ReactDOM안에 줄줄이 길게 쓰면 나중에 알아보기 힘들기 때문에

React.createElement 코드부분을 따로 빼서 작성하는 경우가 잦다.

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

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

 

 

 

 

2.   자바스크립트 언어로 바꿔주는 babel 문법 시작하기

다시 말하자면, 리액트에서는 고작 버튼 하나를 만들기 위해서 저 길고긴 코드를 작성해야만 한다.

너무나 귀찮다! 다행히 좀더 쉽고 간편하게 만드는 문법, babel 라이브러리를 누군가 만들어놨다.

여기서는 기존 코드를 약식으로 쓸 수 있는 JSX 문법이 쓰인다.

//babel 라이브러리를 사용하기 위한 코드
<script crossorigin src="http://unpkg.com/babel-standalone@6/babel.min.js"></script>

//babel 코드를 사용하기 위한 속성
<script type="text/babel">
	const btn = <button>버튼</button>
    ReactDOM.render(
    	btn
        ,document.querySelector('#root')
    )
</script>

 

 

자, 그러면 여기서 문제.

태그 안에 속성과 속성값은 어떻게 넣을까?

const id = 'ingoo'
// const btn = <button id=`${id}`>버튼</button>
// ${}는 기본적으로 자바스크립트 문법이라거 react에서는 사용 못함.

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

 

 

 

 

3.   컴포넌트 시작하기

react : 페이스북이 만듬

     jsx : babel을 활용 페이스북이 만듬.

react-dom : 페이스북이 만듬

babel : 다른사람이 만듬

 

무조건 대문자로 시작해야한다. (와, 이거 몰라서 30분 낭비함.)

자바스크립트에서는 요소를 한번 만들고나면 더이상 사용을 못했다. 무조건 새로 만들어내야했다.

리액트는 Element를 함수나 클래스에 담는 행위로, 요소를 재활용할 수 있다.

컴포넌트는 클래스형과 함수형, 2가지로 나뉘는데 현재는 함수형을 주로 사용하고있다.

하지만, 과거에 잘 만들어놓은 구조에서는 주로 클래스형 컴포넌트가 쓰였으므로 클래스형도 같이 공부해놓아야한다.

//클래스형 컴포넌트 기본구조
//그냥 외워...
class App extends React.Component{}

//함수형 컴포넌트 기본구조
const App = () => {}

 

3-1. 클래스형 컴포넌트 실행하기

//선언
class App extends React.Component{
        render(){
        //render 함수 선언
        //render함수는 화면에 최종적으로 그긱 내용을 넣는 공간
    
    	return (<button>클래스 컴포넌트 버튼</button>)
        //구분을 하기 위한 () 없어도 실행됨.
        //return 안에는 최소한 1개 이상의 상위 엘리먼트가 있어야함
    }
}

//실행
ReactDOM.render(
	//결과물을 JSX로 반환해줌 -> <App /> -> <button>클래스 컴포넌트 버튼</button>
   <App />
   ,document.querySelector('#root')
)

 

 

3-2. 여러가지 단일형 컴포넌트 실행하기

//app2 컴포넌트를 만들고 결과물을 <li>hi</li>
class app2 extends React.Component{
	render(){
    	return(
        	<li>hi</li>
        )
    }
}

//텍스트만 사용하고 싶을때
class Hello extends React.Component{
	render(){
    	return(<>hi</>)
        //또는 <React.Fragment>으로 묶을 수 있다
    }
}

//엘리먼트를 여러개 넣고 싶을때
//부모요소로 한번 감싸준다.
class date extends React.Component{
	render(){
    	return(
                <>
                    <li>제목</li>
                    <li>날짜</li>
                </>
        )
    }
}

 

 

3-3. 여러개를 실행하는 컴포넌트

ReactDOM은 기본적으로 하나의 컴포넌트만 실행을 해줌.

여러개를 실행하고 싶으면 컴포넌트 안에서 해결해야함.

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

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

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

 

 

3-4. 테이블 컴포넌트 실행하기

<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 />
                        </tbody>
                    </table>
                )
            }
        }

        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>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                )
            }
        }

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

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

'프로그래밍 > react' 카테고리의 다른 글

[220414] 빙고게임 완성하기 - 01  (0) 2022.04.17
[220414] 리스트로 DB 데이터를 다루는 방법  (0) 2022.04.17
[220414] 리스트의 단점을 극복하는 상태 끌어올리기  (0) 2022.04.17
[220414] 리액트에서 이벤트 생성하기  (0) 2022.04.16
[220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component)  (0) 2022.04.15

관련글

댓글

티스토리툴바