[React] React란 무엇인가? - React에 대한 개념 정리

react

React

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.  [위키백과]

facebook에서 제공해주는 프론트앤드 라이브러리.

사용자가 조작하기 위한 UI를 만들도록 도와줌.

component 기반

싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 사용

---

React 특징

1. Component 기반 구조

2. Data Flow

3. JSX

4. Virtual Dom

5. Props and State

---

1. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈이다.

스마트폰 액정이 고장 나면 서비스센터에 방문하여 액정을 고치면 된다.
스마트폰 배터리가 고장 나면 배터리를 고치면 된다.

'액정', '배터리' 이를 Component 비유할 수 있다.
소프트웨어에서 '액정'과 '배터리' 같이 기능별로 모아놓은 Class가 있다.
그 Class를 Component라고 생각하면 될 것 같다.

Component 기반 구조를 이용함으로써, 배터리 기능을 하는 곳이 고장 나면 배터리 Component를 수정하면 된다.

유지보수, 관리, 재사용이 용이해지는 장점이 있다.

 

class App extends Component {
  render() {
    return (
      <Layout>
        <Header /> {/*Component*/}
        <Navigation /> {/*Component*/}
        <Content>
          <Sidebar>
          	...
          </Sidebar>
          <Router /> {/*Component*/}
        </Content>
        <Footer>
        	...
        </Footer>
      </Layout>
    );
  }
}

---

2. Data Flow

데이터의 흐름이 한 방향(부모 -> 자식)으로 흐르는 단반향 데이터 (one-way data flow)

부모의 데이터를 바꿔주기 위해 state를 이용.

---

3. JSX

JavaScript eXtension

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML 같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. [나무 위키]

• HTML요소에 class값을 정의할 때 class 대신에 className이라는 단어를 사용한다.
  
  
• 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
  
  
• 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜 표기법(Camel Case)으로 표기해야 한다.
  
  
• HTML에서 주석은 <!-- COMMENT -->, JSX에서는 {/*주석*/}으로 표현한다.
  
  
• HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement />와 같이 파스칼 표기법(Pascal Case)으로 표기한다. 
  
  
• JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.
  
  
• 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다.

---

4. Virtual DOM

DOM = Document Object Model
-> HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리한다.

Virtual DOM은 가상의 Document Object Model

HTML 코드를 작성하고 HTML 파일을 열게 되면, HTML 코드들이 DOM을 만든다.

HTML 코드가 수정되면 전체 DOM을 새롭게 만든다 -> 비효율적

React Virtual DOM은 변경된 부분만 DOM의 반영하는 방식으로 작업한다.

효율성과 속도를 높인다.

---

5. Props and State

공통점 

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있다.

차이점

props는 (like 함수 매개변수) Component에 전달된다.
state는 (like 함수 내에 선언된 변수) Component안에서 관리된다.

 

5.1 props (properties)

부모 Component -> 자식 Component로 전달해 주는 읽기 전용 데이터.

자식 Component에서 props는 변경이 불가능하고, props를 전달해준 최상위 부모 Component만 변경 가능.

 

5.2 state

동적인 데이터를 다룰 때 사용.

독립적이라 다른 Component의 접근이 불가능.

---

[참고자료]

https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

[React] React.js란? (간단 정리)

https://velog.io/@stampid/React%EB%9E%80

React란?