React의 component, state, props

Component

- React의 Component는 JSX라는 언어로 쓰여짐

- 화면을 Component 단위로 나누어 재사용성을 높임

- 각 컴포넌트는 render 함수를 통해 최상위 div 태그 1개로 그려짐

- 컴포넌트 초기화를 위해서는 constructor 함수를 활용하여 props 정의

State

- 상위 컴포넌트의 정보

- 하위 컴포넌트로 props 값 전달 가능

- state 값이 변경되면, 해당 state를 가진 컴포넌트의 render 함수를 통해 화면이 다시 그려짐

+ 개인 의견

Props

- 하위 컴포넌트(태그)의 속성(attribute)로 전달되는 값

- props 변경시 하위 컴포넌트의 render가 다시 실행 됨

---

+ 개인 의견

업무할 때 MVVM 디자인패턴만 사용하다가 리액트 기초 강의에서는 화면과 로직을  모두 한 페이지에서 작성하는 방식을 사용하니 뭔가 신기했다.... 같이 볼 수 있으니까 편한 것 같기도 하고.. 익숙치 않아서 가독성이 떨어지는 느낌도 났다.

리액트는 프레임워크가 아니고 라이브러리라고 하니 다양한 디자인패턴을 활용할 수 있는 듯 한데, 개발자에게 or 개발하는 앱의 특성을 따져서 디자인패턴을 정하는 것도 꽤나 중요할 것 같았다.

 

ember.js에서는 아래와 같이 template에 선언해둔 값을 그냥 component로 바로 땡겨올 수 있고, 하위 컴포넌트에 해당 값을 전달하는 것도 {} 이런 표현 없이 그냥 전달할 수 있는게 편하다고 생각했다..ㅎㅎㅎㅎ

// ember.js
// (상위컴포넌트)/template.hbs
{{(하위컴포넌트)
title=title
}}

// (상위컴포넌트)/component.js
export default Ember.Controller.extend({
  title: "안녕",
});

// react
class App extends Component {
  constructor(props){
	super(props);
	this.state = {
      subject: {title: "안녕"},
    }
  }
  render() {
    return (
      <div className="App">
        <(하위컴포넌트) title={this.state.subject.title}></(하위컴포넌트)>
      </div>
    );
  }
}

하지만 이건 내가 엠버에 익숙하고 리액트는 어색하기 때문이겠지. 수많은 개발자가 리액트를 배우고 활용하는 이유가 있을 거니까.. 그게 뭔지 피부로 느껴보기 위해 나도 공부를 시작한 것 아니겠는가..!!! 장단점을 비교해보면서 공부해봐야될 것 같다.

 

참고: 인프런 생활코딩 - React 10~19강