[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 폴더로 바뀌면서 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 가 완성되는데, 주의 할점은
컴포넌트명을 정할때 앞글자가 대문자여야한다.
Author And Source
이 문제에 관하여([React]기본 개념), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chosh91/React기본-개념저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)