4. 목록과 키 : List and Keys

4.1. map은 대상 배열의 요소 목록으로 변환하여 치환 할 수 있습니다.

const people = [“John”, “Bob”, “Fred”];
const peopleList = people.map(person => <p>{person}</p>);

4.2. 또한 컴포넌트에도 적용 할 수 있습니다.

일단 key warnging 은 무시.

function App() {
    const people = ['John', 'Bob', 'Fred'];
    // 중괄호 {} 를 사용하여 map 을 통한 목록 결과를 표현할 수 있습니다.
    return (
        <ul>
            {/*컴포넌트에 이름을 순차적으로 설정하여 목록화*/}
            {people.map(name => <Person name={name} />)}
        </ul>
    );
}


function Person({ name, key }) {
    // 중괄호를 통해 바로 name 속성에 접근
    return <p>this person’s name is: {name}</p>; 
}

4.3. 리엑트 요소는 키 값 기준으로 반복 - 키설정이 필요

function App() {
    const people = [‘John’, ‘Bob’, ‘Fred’];
    
    // 키는 문자열, 숫자 등과 같은 원시형이어야 된다.
    return ( 
        <ul>
        {people.map(person => <Person key={person} name={person} />)}
        </ul> 
    );
}

// 배열데이터가 유니크한 값을 가지고 있지 않은 경우
// map 함수의 두번째 파라미터인 index 정보를 가지고 key 를 설정할 수 있다.
function App() {
    const people = [‘John’, ‘Bob’, ‘Fred’];
    return ( 
        <ul>
        {/* 배열 요소의 인덱스 값을 키로 사용 */}
        {people.map((person, i) => <Person key={i} name={person} />}
    </ul> );
}

---

React 2020 CheatSheet

이전 글 보기 | 다음 글 보기

01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 |