[React]기본 개념

chosh·2021년 8월 21일

React

리엑트란,

UI(user interface)를 위한 JavaScript기반의 라이브러리 이다.

말그대로 리엑트는 UI 요소를 위한 라이브러리 이며,
render()를 이용해서 UI요소를 구성하고,
Component 를 만들어서 UI 요소를 재사용 할 수 있다.

react는 DOM, Event 를 대체 하기 위해서 나타난 것으로
HTML 파일에 JavaScript파일을 연결해서 동적인 요소를 추가하는 방식으로

JavaScript 파일에

querySelector 를 이용해서 요소를 불러오고,
addEventListenser 로 이벤트를 받아서 함수를 실행하고,
createElement 로 요소를 만들어주고,
appendChild 로 요소의 위치를 정해 주었다면

const commentBarContent = document.querySelector(".commentBarContent");
const commentBarPostbtn = document.querySelector(".commentBarPostbtn");
const comment = document.querySelector(".comment");
const articlediv = document.querySelector(".article");
const descriptionBar = document.querySelector(".descriptionBar");

commentBarPostbtn.addEventListener("click", addComment);

function addComment() {
  const addCommentPtag = document.createElement("p");
  addCommentPtag.innerHTML = commentBarContent.value;
  comment.appendChild(addCommentPtag);
}

React 에서는

추가할 요소를 jsx를 사용해서 component를 통해서 만들고,
Html 파일의 원하는 위치에 넣어주면 된다
React는 component를 통해서 UI를 재사용 할 수 있다
jsx를 사용하면 html 처럼 작성해서 만들기 때문에 훨신 간편하게 요소를 추가 할 수 있다.

import React, {Component} form 'react';

class AddElement extends Component {
	render() {
		return (
       		 <p>
             	{this.state.content}
             </p>
		);
	}
}

export default AddElement;

React 사용방법

초기 React 폴더 셋팅
- 원하는 경로에 react 폴더로 사용할 폴더를 생성한다.
  mkdir react-directory
- 생성한 react 폴더의 경로로 이동한다.
  cd react-directory
- 현재 경로를 react 폴더로 사용 하겠다.
  create-react-app .
경로가 react 폴더로 바뀌면서 react 관련 파일들이 생성됨

public/index.html 파일에 head에 들어갈 정보를 넣는다

글씨체를 사용하기 위한 구글 폰트 링크, 아이콘을 사용하기 위한 링크들...

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js에 원하는 최상위 component를 지정해준다
- 원하는 component를 import 해준다
- component 사용 방법은 <컴포넌트명 /> 이다
- 3번의 <div id="root"></div>의 위치에 <컴포넌트 /> 를 그려달라는 명령어(render)를 추가한다
```
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
```

원하는 component를 계속 붙여 나가면 된다.

만든 component 를 import
부모 component 에서 render 함수를 통해 자식 component를 사용

import React, {Component} 'react';
import Content1 from "./components/Content1";
import Content2 from "./components/Content2";

class Contents extends Component {
  render() {
    return(
    	<Content1 />
      	<Content2 />
    );
  }
}

export default Contents;

component 만드는 방법
jsx를 사용하기 위해서 react 를 import 해줘야 하는데
방법 1은 나중에 component 를 사용할 때 React.Component 로 사용 해야 되고,
방법 2는 Component 라고 쓰고 사용 해도 된다.
방법1
```
import React form 'react';
```
방법2
```
import React, {Component} form 'react';
```
html 요소를 추가 하기 위해서 render 함수를 사용해야 되는데, class를 사용해도 되고, 함수를 사용해도 된다.
함수를 사용한 방법과 클래스를 사용한 방법의 차이로는
예전에 클래스에서만 state와 lifecycle을 사용 할 수 있었는데, 지금은 hook 이라는게 나와서 함수에서도 사용이 가능 하다고 한다.
요즘은 편리한 arrow 함수를 많이 사용한다고 함
방법1
```
class 컴포넌트명 extends Component {
  render() {
    return (
    	html 요소를 작성
    );
  }
}
```
방법2
```
컴포넌트명( () => {
  render() {
    return(
      	html 요소를 작성
      );
  }
});
```
만든 component 를 사용하기 위해서는 export 를 해줘야 한다.
```
export default 컴포넌트명;
```
이렇게 추가하면 하나의 component 가 완성되는데, 주의 할점은
컴포넌트명을 정할때 앞글자가 대문자여야한다.

chosh

제가 참고하기 위해 만든 블로그라 글을 편하게 작성했습니다. 틀린거 있다면 댓글 부탁드립니다.

이전 포스트

[WEB] http 통신

다음 포스트

[React]기본 개념

리엑트란,

React 사용방법

[WEB] http 통신

[Javascript] DOM 요소

0개의 댓글