리액트 공부 - 더블 클릭시 삭제 handleRemove / 라이프사이클 메소드

 

*

더블클릭시 삭제

 

    handleRemove = (index) => {

        const { names } = this.state;

        //편의상 name의 레퍼런스를 미리 만든다 

 

        this.setState({

            names: [

                ...names.slice(0,index),

                ...names.slice(index + 1, names.length)

            ]

        });

    }

    render() {

        const nameList = this.state.names.map(

            (name, index) => (<li key={index} 

            onDoubleClick={() => this.handleRemove(index)}>{name}</li>)

        );

 

 

*

라이프사이클 메소드 

 

DOM 생성 - 웹브라우저에: 마운트 나타남

이 과정에 사용되는 메소드: 

컴포넌트 만들기 - constructor - getDerivedStateFromProps - render - componentDidMount 

컴포넌트? UI를 위한 JS 라이브러리인 리액트의 함수 ( props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수)

컴포넌트 / prop / state 

constructor? 컴포넌트 새로 만들때마다 호출되는 클래스 생성자 메소드 

getDerivedStateFromProps? props에 있는 값을 state에 동기화하는 메소드 

render 우리가 준비한 UI를 렌더링하는 메소드 

componentDidMount 컴포넌트가 웹 브라우저 상 나타난 후 호출하는 메소드 

 

(언마운트: componentWillUnmount 컴포넌트가 웹 브라우저상에서 사라지기 전 호출하는 메소드, 이거 하나 필요)

 

render() - rcc 하면 기본으로 있는 거 

constructor(props){...} 컴포넌트 생성자 메소드. 초기 state 값 지정 가능. 

static getDerivedStateFromProps(nextProps, prevState){

if(nextProps.value !== prevState.value) {

return {value: nextProps.value};

}

return null;

} props로 받아온 값을 state에 동기화 

componentDidMount() {...} 컴포넌트 만들고 첫 렌더링 마친 후 자바스크립트 라이브러리, 프레임워크 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업 처리 

shouldComponentUpdate(nextProps, nextState) {...} props 또는 state 변경시 리렌더링 시작할지 여부 지정 함수 

getSnapshotBeforeUpdate(prevProps, prevState) {

if(prevState.array !== this.state.array) {

const { scrollTop, scrollHeight } = this.list

return { scrollTop, scrollHeight };

}

} 렌더 메소드 호출, 돔에 변화 반영하기 직전 호출하는 메소드. 업데이트 직전 값 참고할 일 있을 때 활용(스크롤바 위치 유지 등)

componentDidUpdate(prevProps, prevState, snapshot) {...}

리렌더링 완료 후 업데이트 직후 

componentWillUnmount() {...} 

컴포넌트를 DOM에서 제거할 때 (componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM 있다면 여기서 제거 작업 해야)