[React] React 개념

React란?

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

• Component: React에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개어 구현
• Virtual DOM: 가상적인 표현을 메모리에 저장하고 ReactDOM과같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍
• JSX: JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경 제공 HTML과유사

 

npx 명령어

• npm create-reaxt-app [디렉토리명]: 패키지를 1회성으로 내려받아 실행할 때 사용한다.
• cd [디렉토리명]: [디렉토리명]으로 이동한다.
• npm start: 현재 디렉토리의 프로젝트를 실행한다.
• npm build: 파일을 압축하고 번들링 하는 과정이다.

 

라이브러리

• npm install : package.json 파일 내 정의된 패키지 설치
• npm install [패키지명]: npm 서버로부터 패키지 내려받기
• npm install [패키지명]@[version]: 특정 버전의 패키지 내려받기
• npm install [git 레포지토리 주소]: npm이 아닌 git 레포지토리로부터 패키지 내려받기

 

package.json

dependencies

설치한 패키지 목록

 

설치한 라이브러리를 프로젝트 내에서 불러오기

• import [패키지명]: import 하는 것만으로도 역할을 하는 라이브러리인 경우
• import something from [패키지명]: 패키지를 불러와 활용할 때
• import { a, b } from 패키지명: 패키지 내 일부 메소드나 변수만 가져올 때 구조 분해
• import * as something from 패키지명: 패키지에 default로 export되는 객체가 존재하지 않을 경우 * as 이름으로 불러온다.

 

CSS를 프로젝트 내에서 불러오기

• import "./App.css": CSS는 from 생략이 가능하다. 확장자는 꼭 적어주어야 한다.

 

HTML에서 JSX로 바뀌는 문법

• class는 className으로 작성한다.
• 스타일은 object로 작성한다.
• 닫는 태그는 필수이다.
• 최상단 element는 반드시 하나여야 한다.

 

Component

재사용이 가능하고 component의 이름은 항상 대문자로 시작해야 한다.

 

Class Component

렌더링을 해주면 되며 구조만 다르다. class 선언 시 React.Component의 메소드들을 사용하기 위해서 extends를 이용해 React.Compoment를 상속받도록 구현해야 한다. 상속 시 해당 클래스형 컴포넌트에서 render() 메소드가 구현되어야 하는데 HTML을 반환해주면 된다.

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

 

Function Component

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

 

Props: 컴포턴트끼리 데이터를 주고받을 때

State: 컴포넌트 내에서 데이터를 관리할 때

 

JSX의 객체 표현

const element = React.createElement( '태그 명', {className: '클래스 명'}, '출력 내용' );

객체를 생성하면 React에서 자동으로 코드 내 버그를 체크한다.

 

마무리

이전에 프로젝트에서 사용했던 리액트 문법들을 다시한번 복습하는 느낌이다. 어렵지 않고 쉽게 이해하고 넘어갈 수 있었다. 좀더 명확하게 기본기를 다지고 개념을 알아가는 느낌이다. 아직 기초적인 내용이라 더 쉽게 느껴지는 것 일수도 있지만 리액트를 배우면서 개인적인 프로젝트를 따로 하나 진행할 예정이다. 프로젝트를 통해서 직접 코드를 짜고 만들어야 이해가 더 잘 간다고 느꼈기 때문이다. 이론적인 내용을 아무리 읽어도 머릿속에 크게 와닿지 않는다.  다음 프로젝트 대비를 위해 열심히 공부를 해야된다고 느꼈다.

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript