[211020] React #03 : (props vs state) + CRUD

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작.

금일 진도는 126P ~ 199P.

목차로는 01. 리액트 기초내에 18) 베이스 캠프 ~ 22) 수업을 마치며

(챕터 01. 리액트 기초, 끝)

 

1. props vs state

props

• props are read only
• props can not be modified

state

• state changes can be asynchronous
• state can be modified using this.setState

상위 컴포넌트가 하위 컴포넌트에 명령할 땐 props를 이용.

하위 컴포넌트가 상위 컴포넌트에 명령할 땐 event를 이용.

 

2. CRUD

이벤트 발생시 실행하는 함수를 핸들러(handler)라고 함.

App.js의 render 함수에서 this.state.mode에 따라 분기를 태워서 변수에 HTML 태그형태를 담음으로써 화면에 보이는 영역을 동적으로 바꿔줌. 그리고 나중엔 이것도 getContent 라는 별도 함수로 모듈화해서 render 내부는 최대한 깔-끔하게 함.

 

input, textarea 와 같은 HTML 태그의 값을 활용하는경우엔, name attribute를 붙여서 event.target.이름.value 이렇게 값을 발췌함.

 

렌더링에 영향을 주지 않는 변수는 굳이 컴포넌트의 state에 넣을 필요없이, 그냥 constructor에 변수처럼 선언해두고 쓰면 됨. 왜냐면 state에 넣는 순간, state의 변경에 따라 컴포넌트가 render 함수를 호출해서 리랜더링하는데...굳이 그럴 필요 없는 값까지 state에서 관리 할 필요는 없으니까.

 

state가 가진 값에 변경,추가,삭제와 같은 로직이 필요할 경우, 원본을 복사(concat이나 Array.from이나 Object.assign)를 통해서 전혀 다른 참조값(call by reference)을 딴 후에, 적용해서 this.setState로 변경할 것. 이 점이 중요한 이유는, react가 state의 변경에 따라 리렌더링의 기준을 삼을 때, shouldComponentUpdate 함수가 호출이 되고 여기서 props의 동일여부에 따라 리렌더링 진행 여부를 판별할 수 있는데...push와 같이 원본 데이터에 변경,추가,삭제를 할 경우 state 변수가 참조하는 메모리값은 변경이 발생하지 않기 때문에 old value와 new value가 결국 동일한 메모리를 참조하므로 변경을 감지하지 못 할 수 있음.

배열형에
추가때는 concat 또는 Array.from & push
변경때는 Array.from 한 뒤에 타겟 인덱스변경
삭제때는 Array.from 한 뒤에 splice(삭제인덱스, 1)

객체는 Object.assign({}, 원본) 해서 작업.

 

shouldComponentUpdate 는 render 이전에 호출되는 함수로, newProps, newState, nextContext를 파라미터로 가지기 때문에, 기존 props, state와 값의 비교가 가능하다. 따라서 해당 값의 변화가 없을경우 return false를 해주면 render 함수가 재호출되지 않는다. 이를통해 굳이 render가 동작하지 않아도 되는 컴포넌트의 무분별한 리렌더링을 줄임으로써 성능적인 이점을 가질 수 있다.

 

상위에서 props로 전달해 준 값을 하위에서 input 태그의 value로 전달하거나해서 변화시키려고 한다면, 이 경우엔 아래처럼 하위 컴포넌트의 state로 재정의해서 사용해야하고 onChange이벤트도 추가해야함.

class Sample extends Component{
    constructor(props) {
        super(props);
        this.state = {
            title : this.props.data.title
        }
        this.inputFormHandler = this.inputFormHandler.bind(this);
    }
    inputFormHandler(e){
        this.setState({[e.target.name] : e.target.value})
    }
    
    render(){
        return (
            // 중략
            <input type="text" name="title" placeholder="title" value={this.state.title}
                        onChange={this.inputFormHandler}/>
        )
    }
}