State & Event - 객체지향방식

Jongwon·2022년 1월 1일
0

ReactJS

목록 보기
5/9

아래 글은 생활코딩님의 강의를 기반으로 작성한 내용입니다.

State

component에 특정 정보를 전달해줍니다. 얼핏 들으면 props와는 비슷하지만, state는 component 내부에서 설정하는 정보이고, props는 자식 컴포넌트에서 설정하는 정보이기 때문에 차이가 있습니다. 생성자 constructor를 통해 내부에서 선언하고, rendering에서 사용함으로써 자식 컴포넌트에서 사용할 수 있습니다.

class App extends Component {
    constructor(props) {
        super(props);
        this.state.title = "welcome";
    }
    
    render() {
        return(
            <h2>{this.state.title}</h2>
        );
    }
}

+ mode
생활코딩님 강의에서는 컴포넌트의 상태를 나타내기 위해 mode를 사용하였습니다. 브라우저의 특정 이벤트가 발생하면 각 mode에 따라 컴포넌트의 동작을 구분하였습니다.

key

반복을 통해 같은 html 태그를 생성하는 경우에는 key를 통해 구분을 해야합니다.

 while(i < length) {
    lists.push(<li key={data[i].id}>{data[i].title}</li>);
    i++;
}



이벤트

React의 핵심은 이벤트라고 할 수 있습니다. react는 기본 자바스크립트와는 달리 변경된 부분만 표시하고, 페이지를 새로고침 하지 않기 때문에 default 이벤트는 제거될 필요가 있습니다.

preventDefault
eventhandler 함수의 매개변수는 event를 가리키도록 약속하고 있습니다. 따라서 handler 함수에서 event.preventDefault()를 호출하면 기존의 event의 자동 실행을 막을 수 있습니다.

<h1><a href='/' onClick={function(e) {
    e.preventDefault();
    this.setState({});
}}</a></h1>

이벤트 설정

이벤트 함수에서 2종류의 에러를 겪을 수 있습니다.

  1. this 사용 불가

    컴포넌트에서 사용하는 this는 컴포넌트 자신을 가리킵니다. 따라서 이벤트 함수에서 this는 컴포넌트를 가리킬 수 없고, undefined로 정의됩니다. 위의 preventDefault에서 작성한 예시를 그대로 사용한다면 다음과 같은 에러가 나옵니다.

    Uncaught TypeError: Cannot read properties of undefined

    위의 코드를 아래와 같이 bind로 엮으면 컴포넌트를 가리키는 this와 event handler가 묶인 새로운 event handler함수가 자체적으로 정의되고, 이 안에서는 this를 사용할 수 있습니다.

<h1><a href='/' onClick={function(e) {
    e.preventDefault();
    this.setState({});
}.bind(this)}</a></h1>

bind함수의 한가지 중요한 점은, 두번째 매개변수부터는 연결하는 함수의 매개변수로 값이 넣어진다는 점입니다.

function(a, e) { }.bind(this, a)

라는 함수가 있다면, bind의 a라는 값은 function의 a에 넣어집니다.

  1. 이벤트 함수 내에서 state의 직접적인 참조 불가능

    event handler함수가 아니더라도 state는 constructor, 즉 생성자에서만 직접적인 정의가 가능하고, render와 같은 다른 부분에서는 직접 참조할 수 없습니다. 에러는 나지 않겠지만, react는 이를 인식하지 못하고 원하지 않던 결과를 출력하게 됩니다.

    이를 해결하기 위해 setState()를 통한 간접 참조를 해야합니다. 위의 예시에서 setState를 이용하여 구체적으로 변경해보자면 아래와 같습니다.

this.setState({
    mode: "welcome",
})

react는 여기서 멈추지 않고 사용자 정의 event handler를 컴포넌트에 전달할 수 있습니다.


Props로 전달

<Subject title={this.state.Subject.title} sub={this.state.Subject.sub} 
    onChangePage={function() {
        this.setState({mode:"welcome"});
    }.bind(this)
}></Subject>

가운데 onChangePage라는 function을 props로 지정한 모습입니다. 내부에서 event가 발생 시 처리할 함수를 작성하고, 이를 Subject 컴포넌트에 전달합니다.

Subject 컴포넌트는 자신이 onClick이벤트가 발생 시 onChangePage함수를 실행하고 싶다면 아래와 같이 정의하면 됩니다.

<a href='/'
    onClick={function(e) {
        e.preventDefault();
        this.props.onChangePage();
    }.bind(this)}
></a>

Subject 컴포넌트의 return 중 일부를 발췌해 보았는데, 위와 같이 this.props.onChangePage로 함수를 받아올 수 있고, 매개변수로 상위 컴포넌트에 전달할수도 있습니다.





참고
key: https://reactjs.org/docs/lists-and-keys.html

profile
Backend Engineer

0개의 댓글