[React] React란 무엇일까?

 

 

🎠 리액트가 무엇인지, 왜 프론트에서 사용되는지 알기 위해 리액트의 개념을 정리하고자한다.

---

1. 리액트의 정의

사용자 인터페이스를 위한 자바스크립트 라이브러리

- "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 기반으로 복잡한 UI를 구성하도록 돕는다.

- 선언형 : 상호작용이 많은 UI르 만들 때 생기는 어려움을 줄여준다. 데이터가 변경되면 React는 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.

- 빠르고 확장 가능한 웹 앱을 구축하는데 도움을 준다.

- 사전 빌드된 구성 요소가 제공되지 않아 처음부터 React 앱 구성 요소를 만들어야 한다.

🔔라이브러리란?
미리 작성된 코드 그룹으로 작업을 쉽게 완성시켜 준다. 재사용 할 수 있는 기능을 미리 구현한 후 필요한 곳에서 호출될 수 있도록 만들어진 도구의 집합

 

2. 리액트의 특징

1. 간단한 컴포넌트

 - render()  : 데이터를 입력받아 화면에 표시하는 내용을 반환하는 역할

class HelloMessage extends Readct.Component {
	render() {
    	return 
        	<div>Hello {this.props.name}<div>;
    }
}

root.render(<HelloMessage name="Taylor" />);

 

2. 상태를 가지는 컴포넌트

 - this.state를 이용하여 내부적인 상태 데이터를 가질 수 있다. 컴포넌트의 상태 데이터가 바뀌면 render()가 다시 호출되어 마크업이 갱신된다.

class Timer extends React.Component {
	construnctor(props) {
    	super(props);
        this.state = {second: 0};
	}
    
    tick() {
    	this.setState(state => ({
    		seconds: state.seconds + 1
		}));
    }
    
    componentDidMount() {
    	this.interval = setInterval(() => this.tick(), 1000);
	}
    
    componentWillUnmount() {
    	clearInterval(this.interval);
    }
    
    render() {
    	return (
        	<div>
            	seconds: {this.state.seconds}
            </div>
        );
	}
}

root.render(<Timer />);

 

3. 애플리케이션

 - props와 state를 이용해서 간단한 Todo 애플리케이션을 만들 수 있다. 이벤트 핸들러들은 이벤트 위임을 통해 하나로 구현된다.

class TodoApp extends React.Component {
  	constructor(props) {
      	super(props);
          this.state = { items: [], text: ''};
          this.handleChange = this.handleChange.bind(this);
          this.handleChange = this.handleSubmit.bind(this);
			}
      
      render() {
      	return (
          	<div>
              	<h3>TODO</h3>
                  <TodoList items={this.state.items} />
                  <form onSubmit={this.handleSubmit}>
                  	<label htmlFor="new-todo">
                      	What needs to be done?
                      </label>
                      <input
                      	id="new-todo"
                          onChange={this.handleChange}
                          value={this.state.text}
                      />
                      <button>
                      	Add #{this.state.items.length + 1}
                      </button>
						</form>
          	</div> 
         );
 handleChange(e) {
 	this.setState({ text: e.target.value });
 };
 
 handleSubmit(e) {
 	e.preventDefault();
  if (this.state.text.length === 0) {
  	return;
  };
  const newItem = {
  	text: this.state.text,
      id: Date.now()
  };
  this.setState(state => ({
  	item: state.items.concat(newItem),
      text: ''
  }));
}
}
class TodoList extends REact.Component {
	render() {
  	return (
      	<ul>
				{this.props.items.map(item => (
					<li key={item.id}>{item.text}</li>
				))}
			</ul>
     	);
  }

		root.render(<TodoApp />);

 

3. 리액트의 장점

1. 더 빠른 웹 개발

- React는 다른 앱을 위해 빌드된 구성 요소를 재사용할 수 있다.

2. 고성능 앱

- React를 사용하여 매우 빠르고 효율적인 앱을 만들 수 있다. 브라우저의 DOM을 직접 수정하지 않고 메모리에 가상 DOM을 만든다.

3. 높은 유연성

 - React앱의 한 부분을 변경해도 다른 부분에는 영향을 끼치지 않는다.

---

🌸 이번 프로젝트에서 프론트엔드를 맡고 처음으로 리액트를 쓰면서 리액트 공부의 필요성을 느꼈다. 잘 쓰면 지금보다 더 수준 높은 퀄리티의 웹사이트를 만들 수 있을 것 같다. 잊지 않고 다음에 응용할 수 있도록 공부한 내용을 기록하려 한다. 예시 코드도 읽기 어렵다. 공부할 내용이 산더미다.