TIL #13 합성이벤트, key Prop

합성 이벤트 

 

리액트의 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받는다.

stopPropagation()와 preventDefault()를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만,

 

모든 브라우저에서 동일하게 동작한다.

---

클래스 내의 this

 

Javascript 클래스 내에서 메서드는 기본적으로 바인딩되어 있지 않다.

그러므로 이벤트에 콜백 함수를 전달해 줄 때 따로 바인딩의 과정을 거치지 않으면 this는 undefined가 된다.

 

=> 퍼블릭 클래스 필드 문법을 사용한다면 따로 바인딩의 과정을 거칠 필요는 없다. (CRA에 기본적으로 설치되어 있다.)

---

key prop

 

리액트에서 자식 컴포넌트에 대해 map함수를 사용하여 재귀적인 처리를 실행하게 되면 이러한 경고가 뜨게 된다. 

 

 

 

각 자식들에게 유니크한 키값을 부여해 주어야 한다고 한다.

 

주기 싫은데 줘야 한다고 한다.

경고창만 보면 맘이 편치 않아....

 

리액트 공식문서에서 확인해 보니 어떤 항목을 변경, 추가 또는 삭제할지 식별하기 위해 지정해 주어야 한다고 나와있다.

 

또한 리액트는 새로운 엘리먼트를 그리기 위해 비교 알고리즘(Diffing Algorithm)을 사용하는데, 요소마다 키값을 부여해주면

동일한 요소를 새롭게 그리는 수고를 덜 수 있다.

 

키의 특징

• 키 속성은 형제 요소 사이에서만 고유할 필요가 있고 전역 범위에서 고유할 필요는 없다.
• 키는 주변 배열의 context에서만 의미가 있다. 

사실 두 번째 특징을 글로 봤을 때는 이해하기가 힘들었다.

그래서 예시로 설명해보자면...

 

처음에 작성한 코드

Feeds.js

import React, { Component } from "react";
import "./Feeds.scss";
import Comment from "./Components/Comment";

class Feeds extends Component {
    constructor() {
        super();
        this.state = {
            commentContentList: ["one", "two", "three"],
        };
    }
    render() {
        return (
                    <ul className="comment_box">
                        <Comment commentList={this.state.commentContentList} />
                    </ul>
        );
    }
}

export default Feeds;

comment.js

import React, { Component } from "react";

class Comment extends Component {
    render() {
        return this.props.commentList.map((comment, idx) => (
            <li key={idx}>{comment}</li>
        ));
    }
}

export default Comment;

 

리액트 공식문서의 예시를 보고 수정한 결과

Feeds.js

import React, { Component } from "react";
import "./Feeds.scss";
import Comment from "./Components/Comment";

class Feeds extends Component {
    constructor() {
        super();
        this.state = {
            commentContentList: ["one", "two", "three"],
        };
    }
    render() {
        return (
                    <ul className="comment_box">
                        {this.state.commentContentList.map((comment, idx) => {
                            return <Comment key={idx} comment={comment} />;
                        })}
                    </ul>
        );
    }
}

export default Feeds;

comment.js

import React, { Component } from "react";

class Comment extends Component {
    render() {
        return <li>{this.props.comment}</li>;
    }
}

export default Comment;

 

이렇게 변경되어야 만일 해당하는 자식 요소를 부모 요소에서 삭제하려고 할 때 key값을 통해 식별이 가능하다.

 

key 속성 주의사항

 

리액트 공식문서에는 배열의 인덱스를 요소의 키값으로 사용하는 것을 지양하고 있다.

 

키값으로 인덱스를 사용해도 되는 경우는 이곳에서 확인할 수 있다.

---