[React][Codestates] React 기초 II

React Intro

map을 이용한 반복

Reat에서 여러 데이터를 렌더링 할 때 사용하는 map method에 대해 학습해보자. map method가 생각이 잘 안나면 이전 포스팅 을 잠시 읽어보자..!!

• "In React, the map() function is most commonly used for rendering a list of data to the DOM."
• 만약 블로그에 몇 십, 몇 백개의 포스틀르 하드코딩(hardcoding : 모든 데이터를 코드에 작성하는 것)으로 작성을 한다면 타자연습은 되겠지만, 매우 힘들것이다. 손가락도 아프고,,, 손가락은 소중하다, 그리고 키보드 수명도 줄지않을까..아무튼.. 이럴 때 map을 이용하여 반복 을 하면 나의 손가락 관절과 키보드의 수명을 좀 줄일 수 있을것이다.

**map은 배열의 각 요소를 , 특정 함수를 거쳐 , 새로운 배열로 출력을 해주는 method이다.

• 공부를 할 때에나 업무를 할 떄 반복되는 작업 또는 문서를 하나의 step 또는 하나의 format으로 정해놓으면 그 작업은 훨씬 쉬워지고 간결해진다. 이와 같이 반복적인 요소들을 골라서 배열의 요소로 넣으면 map 함수애 의해 React에 모든 요소를 렌더링 할 수 있다.
• 블로그 post의 요소는 id, title, content 등으로 나뉜다. HTML element에 이 데이터를 적절하게 넣어주어야 한다.

key 속성

• React에서 map을 사용할 때 key를 넣어주어야한다. key는 React가 변경되거나 새로 추가 또는 제거된 항목을 식별할 수 있도록 하기 때문에 중요하다고 한다. Understanding the map() function in React.js
• key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 떄문에 id를 사용하는 것이 좋다고한다. 만약 정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있다고한다. (as a last resort)로 최후의 수단으로 사용한다고 한다! React 공식문서에서 더 공부해보자...!!!

참고로 eaport default function Name(){~}은 export your data file as default 이라고한다.

• map()을 이용하여 rendering 하는 것을 코드로 확인해보자 !

const posts=[{
    id:1,
    title:"Hello Sora Kang",
    content:"Welcome to learning React!!!"
},{
    id:2,
    title:"Introduction",
    content:"I want to be a Software Developer "
},{
    id:3,
    title:"Practice",
    content:"Practice Reacat via npm run stsrt"
}];

나는 위의 코드들을 포스팅하고싶다..!

// 아래의 코드는 map을 사용하지 않을 때 하드코딩으로 Rendering을 하는 코드이다.

export default function Blog(){
    return (
        <div>
            <div>
                <h3>{posts[0].title}</h3>
                <p>{posts[0].content}</p>
            </div>
        </div>
    );
}

일단 한 개를 써보니,, 귀차니즘이 심한 나에겐 너무 힘든 일이다.. 더 쓰지 않아도 저것보다 더 길어질 것이다.

귀찮아서 한 개만 쓴 결과는 아래와 같다.

나머지 두 개는 쓰기가 너무 귀찮다..만약 100개 1000개였으면...ㅜㅜ..

이런 일을 하지 않기위해 map을 사용하면 매우 편리하다.

// 아래의 코드는 map을 사용하여 Rendering을 한 code 이다.

export default function Blog(){
    const blogs=posts.map((post)=>(
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    ));
    return <div className="post-blogs">{blogs}</div> ;

}

결과는 아래와 같다.

전체 코드는 여기 git 애 볼 수 있다.

Create React App

Achievement Goals

• Create Ract App이 무엇인지 대략적으로 알 수 있다.
• npx create-react-app으로 새로운 리엑트 프로젝트를 시작할 수 있다
• create-react-app으로 간단한 개발용 React 앱을 실행할 수 있다.
• 리엑트 프로젝트 구성을 대략적으로 이해할 수 있다.