[react] react 기초 개념

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 !

 

1. react가 많이 사용되는 이유?

-react의 등장 배경

현재 웹 어플리케이션이 동적인 상호작용이 많아지고 다뤄야 할 데이터와 코드가 증가하게 됨

-> dom에 직접 접근해서 조작하는 방법으로는 유지보수하기 어려워짐

-> 생산성 향상과 유지보수의 편의를 위해 다양한 framework와 library가 등장

 

-react가 많이 사용되는 이유

1) 자바스크립트의 library로 자바스크립트의 문법을 그대로 활용함

2) 사용자가 많고 커뮤니티가 발달됨

3) react native를 통해 모바일 어플리케이션 개발도 가능함

 

-framework vs library

framework : 틀 -> 정해진 틀 속에서만 그 흐름에 따라 수동적으로 작업

library: 도구 -> 원하는 기능을 찾고 능동적으로 가져와서 사용

 

 

2. react는 무엇인가?

-사용자 인터페이스(ui)를 만들기 위한 자바스크립트 library

 

-특징

1) 선언적(<-> 절차적)

2) virtual dom : view에 변화가 생겼을 때 화면을 처음부터 다시 띄우는 것이 아니라,

가상의 돔 2개를 띄워놓고 변화가 생긴 부분만을 바꿔서 띄워줌 => 성능 저하를 개선

3) component

4) jsx

 

 

3. component의 개념과 종류

-개념

재활용이 가능한 ui 구성 단위

<tag>와 모양이 같아 <Component> Uppercase로 작성해야 함

 

-특징

재사용 가능

코드의 유지보수에 좋음

또 다른 component 포함가능

 

-종류

1) class형

-반드시 render()가 있어야 하고, 그 안에서 jsx를 반환함

ex. 

class App extends React.Component {

  render() {

    return <h1>This is Class Component!</h1>;

  }

}

 

2) 함수형

-render() 없이 jsx를 반환

ex. const App = () => {

  return <h1>This is Function Component!</h1>;

};

 

 

4. jsx정의와 기본 특성

-정의

react에서 사용하는 자바스크립트 확장 문법

ex.

const element = {

  <h1 className="greeting">

    Hello, World!  

  </h1>

};

 

-문법

import React from "react";

function App() {

  // 1. JSX javascript value

  // value

  // 2. JSX 자바스크립트 값을 포함할 수 있다

  // {}

  // JSX안에서는 값만 사용할 수 있어 if, for문은 사용할 수 없음

  // 값인지 아닌지? 변수 안에 담을 수 있는지

  const name = "위코드";

  // 3. JSX 속성 정의

  // HTML, Javascript, camelCase

  // class -> className, tabindex -> tabIndex

  const title = "subject";

  // 4. Event 처리하기

  // on + 이벤트 명

  const introduce = () => alert("Hello World");

  // 5. inline style

  // javascript object

  const style = {

    color: "red",

    backgroundColor: "yellow",

  };

  // 6. JSX Closing

  // <img> 같이 닫는 태그 없이 사용했던 태그도 닫는 태그/셀프 클로징 필요함

  // 7. 하나의 부모 태그

  // 8. React.Fragment

  // 전체 태그를 그룹화하기 위한 용도로만 사용

  // 실제 브라우저의 DOM 상에는 <React.Fragment>가 추가되지 않음

  // <> </> 이렇게만 써줘도 인식함

  return (

    <>

      <h1 className={title} onClick={introduce} style={{ color: "red" }}>

        Hello {name}

        <img />

      </h1>

      <p></p>

    </>

  );

}

export default App;

 

 

5. cra

-cra를 통한 프로젝트 구축

$ cd [프로젝트를 구축하고자 하는 폴더]

$ npx create-react-app [프로젝트명]

$ cd [프로젝트명]

$ npm start

 

-node_modules, .gitignore, package.json

1) node_modules

npm으로 다운받은 패키지들의 모든 소스 코드가 존재하는 폴더

 

2) gitignore

용량, 보안 등 여러가지 문제로 github에 올리지 않아야 하는 파일을 추가

 

3) package.json

cra 기본 패키지 외에 추가로 설치된 라이브러리, 패키지의 종류, 패키지의 버전 등의 정보가 기록되는 파일

* dependencies : npm을 통해서 설치한 모든 패키지 리스트와 버전 확인이 가능

* scripts : react 프로젝트를 실행하기 위해서 사용할 수 있는 명령어 관리

  ex. "start": "react-scripts start"

* package-lock.json : npm을 사용하여 패키지를 설치하거나 업데이트하면 자동으로 생성되거나 수정되는 파일 -> 설치된 패키지의 정확한 버전 명시

 

 

Resources

wecode의 westudy페이지