DoIt 리액트 프로그래밍 정석 (3장)

이번 포스트는 3장 리액트 컴포넌트에 대해서 알아보도록 하겠습니다.

 

  ✔ 컴포넌트란?

   MVC 패턴의 뷰를 독립적으로 구성하여 재사용을 높인 방식으로 기존의 컴포넌트를 새로운 컴포넌트 생성에 활용 가능합니다.

   기존의 MVC 패턴의 특징인 각 요소의 의존성이 높아 재상용이 어려웠던 단점을 보완하였습니다.

 

  ✔ Prop 란?

   리액트에서 데이터는 상위에서 하위로 단방향으로 데이터가 흐르는 규칙을 가지며 이때 전달되는 값입니다.

   버그 예방을 위해 아래처럼 prop의 자료형을 미리 선언하는 것을 추천드립니다.

class a extends React.Component {
	render() {
    	return (
            <div>{this.props.propValue}</div>
            <div>{this.props.propRequiredValue}</div>
            <div>{this.props.propObjValue}</div>
        );
    };
}

a.propTypes = { 
    propValue: PropTypes.string,
    propRequiredValue: PropTypes.string.isRequired,
    propObjValue: PropTypes.shape({
    	val1: PropTypes.string,
        val2: PropTypes.numver,
    }),    
}

a.defaultProps = {
    propValue: "DEFAULT"
}

 

 ✔ State 란?

  컴포넌트의 내부 상태 관리를 위한 데이터입니다.

  생성자에서 반드시 초기화를 해야 하며, 값 변경이 setState() 함수를 통해 관리하는 것을 추천드립니다.

  setState()는 비동기 처리되며, setState() 이후로 연결된 함수들의 실행이 완료되는 시점에 화면 동기화 진행합니다.

  즉, setState()가 아닌 데이터를 직접 변경하는 경우 리액트 엔진에서 변경 여부를 알지 못해 동기화 진행되지 않습니다.

 ✔ 컴포넌트 생명주기란?

  링크 참조 

 

 ✔ 클래스형 컴포넌트란?

  클래스형 컴포넌트는 리액트 생명주기 함수 및 컴포넌트 구성요소를 모두 포함합니다.

  아래의 소스화 같이 클래스형 컴포넌트는 두 종류의 클래스(Component, PureComponent) 중 하나를 상속받아 구현합니다.

  PureComponent는 Component 컴포넌트를 상속받아 shouldComponentUpdate() 함수를 얕은 비교로 정의되어있습니다.

  PureComponent를 사용하는 이유는 비교 검사 작업이 성능에 영향을 끼치기 때문입니다.

class Comp extends React.Component {
    constructor(props) {
    	super(props);
    }
    componentDidMount() { // 상속받은 생명주기 함수 }
    render() { // 상속받은 화면출력 함수 }
}

class Comp extends React.PureComponent {
    constructor(props) {
    	super(props);
    }
    componentDidMount() { // 상속받은 생명주기 함수 }
    render() { // 상속받은 화면출력 함수 }
}

 

 ✔ 함수형 컴포넌트란?

  함수형 컴포넌트는 state 및 생명주기 함수를 포함하지 않으며 아래처럼 데이터를 받아 결괏값을 리턴하는 직관적인 기능을 합니다.

function Comp(props, context) {
    const { propVal } = props;
    const { contextVal } = context;
    return <p>Hello React</p>
} 

 

 ✔ 콜백 함수를 통해 이벤트 전파하기

  하위 컴포넌트에서 이벤트가 발생하여 상위 컴포넌트로 부터 받은 prop의 변경이 필요한 경우 어떻게 해야 할까??

  리액트 특징인 Prop Drilling 패턴 때문에 직접 prop은 변경할 수 없다. 이때 콜백 함수를 활용하면 됩니다.

  이때 Count 컴포넌트에서 받은 addCnt 함수를 그냥 호출하면 this 범위오류로 정상동작하지 않습니다.

  해결을 위해 bind를 사용해서 this를 조정해줍니다.

class App extends React.Component {
    constructor(props) {
    	super(props);
        this.addCnt = this.addCnt.bind(this);
    }
    
    render() {
    	return <Count cnt={this.state.cnt} add={this.addCnt} />
    }
}

 

 ✔ useRef 란?

  컴포넌트 변수에 Dom 객체 함수를 할당할 때 사용합니다. 

class App extends React.Component {
    constructor(props) {
    	super(props);
        this.setRef = this.setRef.bind(this);
    }
    setRef(ref) { this.ref = ref; }
    checking() { 
    	if(this.ref.getBoundingClientRect().top < window.innerHeight) {
        	console.log("Checked!!");
        }
        else {
        	console.log("unChecked!!");
        }
    }
    
    componentDidMount(){ window.addEventListener('scroll', this.checking); }
    componentWillUnmount(){ window.removeEventListener('scroll', this.checking); }
    
    render() {
    	return <div ref={this.setRef}/>
    }
}