React 특징 (~ 진행중)

 

 

 

* React 공식문서 번역 한글페이지

 

참 대단하고 고마우신 분들이다. 공식문서의 한글 번역으로 React 의 특징이나 튜토리얼을 보기가 한결 편해졌다.

 

여기서는 React 의 기본적인 특징을 알아보고

 

구직활동하면서 받았던 서면평가의 질의에 대한 답변 부분도 함께 작성해 나가려고 한다.

 

 

특징

 

기본적으로 내가 사용하면서 느낀점은 컴포넌트형태의 개발형태로 기존의 html 에서는 div, p, span 등 용도와 형태를 정확히 파악 할 수 없는 부분들이 있었는데 React 에서는 원하는 이름으로 컴포넌트 태그를 만들어 조립하듯이 끼워넣으며 UI 구성이 가능하다.

 

그리고 기존 html css js 에서는 이벤트나 상태변화를 나타내기위해 아주 많은 양의 코드와 복잡함이 필요했는데 React 에서는 state 로 불변성을 유지하고 props 로 자식컴포넌트에게 쉽게 부모의 데이터나 상태를 전달하여 상태관리 및 코드의 관리가 수월해 진다는 장점이 있는것같다.

 

공식문서에서도 이와 같은 점들을 특징으로 소개하고있다.

 

 

1. 단일컴포넌트

 

스스로 상태를 가지고 관리하느 캡슐화된 컴포넌트를 생성한다음 복잡한 UI 를 만들기 위해 구성합니다. 컴포넌트 로직은 템플릿 대신 JavaScript로 작성되므로 앱을통해 풍부한 데이터를 쉽게 전달하고 DOM에서 상태를 유지 할 수 있습니다.

 

데이터를 받고 화면에 표시하는것을 render() 메서드로 구현한고있고 JSX 로 별도의 html 파일 생성없이 JavaScript 단에서 페이지 구성이 가능하도록 할 수 있습니다. props 를 통해 부모 컴포넌트에서 데이터를 받아 올 수 있습니다.

 

class test extends Component {

render() {

return (

<div>

<HelloWorld name="NAME" />

</div>

);

}

}

const HelloWorld = () => {

return (

<div>

Hello {this.props.name}

</div>

);

};

Component 는 생성하게되면 그 즉시 생명 주기를 가지며 그 생명주기를 활용하여 여러가지 기능들을 구현 할 수 있습니다.

 

만약 단순히 View 만을 위한거라면 class Component 형태가 아닌 함수컴포넌트 형태로 사용하여 생명주기를 포함하지 않을 수 있습니다.

 

{} 통해서 javascript 문법을 html 형식 내에서도 구현 할 수 있습니다.

 

2. 상태기반 컴포넌트

 

입력데이터는 가져오는것 외에도 컴포넌트는 자체적으로 내부에서 상태 데이터를 관리 할 수 있습니다.

이는 this.state 로 사용이 가능합니다. 컴포넌트의 상태 데이터가 바뀌면 render() 를 호출하여 다시 랜더링하여 업데이트를 하게 됩니다.

 

import React, { Component } from 'react';

class App extends Component {

state = {

seconds: 0

}

_tick = () => {

this.setState({

seconds: this.seconds++

})

}

componentDidMount() {

setInterval(this._tick(), 1000)

}

render() {

return (

<div>

Seconds: {this.state.seconds}

</div>

);

}

}

export default App;

 

 

여기서 componentDidMount() 는 컴포넌트 출력이 DOM에 랜더링 된 후에 동작합니다.

 

state 는 직접적인 수정을 하면 안되고 꼭 setState를 통해서만 변경이 이루어 져야 한다.

 

모든 state 는 항상 특정 컴포넌트가 가지며 state에서 파생된 모든 데이터 또는 UI는 트리컴포넌트 아래인 자식컴포넌트에만 영향을 미칩니다.