[리액트] 초기세팅 및 실습 2차

[참고] 

문서 - 리액트로 생각하기

ko.reactjs.org/docs/thinking-in-react.html

React로 사고하기 – React

컴포넌트 분리해서 데이터 흐름 실습하기

코드 : github.com/GoldK11/React/tree/main/practice/componentTest

---

[npm npx]

npm 영구 설치

npx 임시로 설치하고 지움 (공간 낭비x, 최신버전)

 

 

[리액트 라이프사이클]

 

 

[디자인 패턴에 대한 고찰]

MVC

MVP

MVVM

Flux - 이 패턴이 곧 리덕스 사용을 요함...

 

 

[props와 state 관리]

- props는 부모가 자식에게 (단방향)

- state는 상호작용에 의한 동적인 상태변화를 감지해야할 때 사용

- state는 최소한으로 관리하자. 중복 배제의 원칙

 

 

[state 정의 3원칙]

부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

 

 

[state 소유 4 원칙]

1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.
2. 공통 소유 컴포넌트를 찾으세요. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트).
3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 합니다.
4. state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가하세요.

 

 

 

[역방향 데이터 흐름]

자식에서 부모 컴포넌트로 상태를 변경하고 싶을 때

 

1. 부모 컴포넌트에서 자식 컴포넌트에 props로 커스텀 이벤트 전달

// Parent컴포넌트의 render 메서드
  render() {
    return (
      <div className="App">
        <Child onChildChange={this.handleChildChange}></Child>
      </div>
    );
  }
  
// Parent컴포넌트의 handleChildChange 메서드  
  handleChildChange = ()=>{
    console.log("child content change@!!!@#!@#");
  }

 

2. 자식 컴포넌트에서 이벤트 전달을 원하는 시점에 props로 전달받은 onChildChange 메서드를 실행

// Child컴포넌트의 render 메서드
    render() {
        return (
            <div>
                <button onClick={this.btnClick}>Click</button>
            </div>
        );
    }
    
 // Child컴포넌트의 btnClick 메서드
     btnClick = (e)=>{
        this.setState({content:"Clicked Content..."})
        this.props.onChildChange(); // 여기서 부모 컴포넌트로부터 전달받은 이벤트 호출
    }

 

3. 부모 컴포넌트에서 onChildChange에 매핑해놓은 handleChildChange가 동작 

 

 

 

[redux]

vuex처럼 redux라는 스토어 지원

양방향 데이터 전달 및 형제간 공유 데이터 흐름이 복잡해질 것 같을 때는 그냥 이거 쓰자

Flux 디자인패턴

아직 안써봄