리액트

리액트

공식 사이트 : https://reactjs.org/

 

장단점

장점 : JSX로 생산성이 높다. Virtual DOM을 이용해 빠른 랜더링이 가능하다. 컴포넌트를 잘 구성하면 재사용이 용이하다. CSS 캡슐화

단점 : MVC 구조에서 명확히 V만을 담당한다. C쪽에서 답답할 수 있다.

특징 : 단방향

 

기본적인 사항들

필요한 서드파티 라이브러리 : Redux(변수전달), axios(AJAX)

빌드 : nodeJs의 webpack(빌더), babel(JSX 컴파일러)을 사용

프로젝트 구조 : 지정되어있다.

 

문법

class App extends Component {} 로 각 컴포넌트를 정의하며, 한 컴포넌트는 render()함수를 가지고 있어야 한다.

render함수에서 리턴하는 HTML이 랜더링된다.

정의한 컴포넌트는 태그로 넣을 수 있으며, 컴포넌트 생성시 props를 통해 값을 전달할 수 있다.

변수정의(props나 state), 함수정의는 render()함수 바깥에 정의하고, 값계산은 render함수 내에서 return하기 전에 수행한다.

기본적으로 this를 많이 사용하는데, 함수를 정의하는 여러 방법중 어떤 것들은 bind()를 이용해 this를 묶어 주어야 한다.

{} 중괄호를 이용해 함수와 변수를 출력하거나 전달한다.

변수를 전달하고 저장하는 방법

• 함수호출

  1. props : 자녀 컴포넌트가 부모 컴포넌트에게 전달받은 상수값으로 자녀 내에선 변경할 수 없다. 함수도 전달 받을 수 있다.

      props는 전달받지 못할 경우를 대비하여 기본값을 정의할 수 있다.

      일반적으로 전달받은 값을 변경할 수 있는 함수를 같이 받거나

  2. state : 컴포넌트 내부에 변수를 지정할 수 있으며, setState()함수로 변수내용을 변경해야 랜더링이 된다.

      자식 컴포넌트가 전달받은 props를 변경할 수 없기에, 자식 내부에서 state를 정의해 받은 props값으로 state값을 변경한다.

 

• 이벤트방식 

  1. Redux : 변수 저장 및 Redux에 변수를 저장하고, 변경사항을 구독하는 리스너를 생성해 변수변경 및 전달. 이벤트, 메세지 구독로직.

      컴포넌트가 전달해야 하는 단계가 깊어질때 사용을 고려해볼만한 서드파티

      컴포넌트를 2개의 역할로 나누고(presentational(표현용), container(리덕스연결, 데이터갱신용) 

      액션정의(어떤 오퍼레이션인지 키값을 정의), 리듀서정의(오퍼레이션 동작을 구현하고 등록), 스토어(리스너등록, 실제 변경될 값 정의)

 

 

예시

class App extends Component {

  state = {

    name: 0,

    key: 0

  }

  handleIncrase = () => {

    this.setState({

      value: this.state.value + 1

    });

  }

  render() {

    const 변수정의, 계산...

    return (

        JSX문법 {} ...

        <MyApp name={this.state.name} />

    )

  }

}

class MyApp extends Component {

  static defaultProps = {

    name: "기본이름"

  };

  render() {

    return <div>안녕하세요 제 이름은 {this.props.name}입니다.</div>;

  }

}