2022년 6월 2일

Daisy🌼·2022년 6월 2일

TIL

1. React의 장점

선언형 프로그래밍

React의 장점 중 하나는 선언형 프로그래밍이라는 것입니다.
선언형 프로그래밍이란, 내부 로직이나 흐름을 추상화하여 결과에만 신경쓸 수 있도록 하는 방식입니다. 코드의 흐름을 따라가며 결과를 예측해야 하는 명령형 프로그래밍과 달리, 선언형 프로그래밍을 적용하면 내부 구현을 알지 못해도 결과값을 예측할 수 있습니다.
예를 들어 JavaScript의 map(), filter()와 같은 배열 메서드는 모두 배열의 요소들을 반복하면서 특정 동작을 수행합니다. 이를 위해 반복문을 사용하지 않고 해당 메서드만 사용함으로써 값을 쉽게 예측할 수 있습니다.
React는 구체적은 내부 구현을 컴포넌트라고 하는 단위로 추상화합니다.

⭐️ 정확하고 구체적인 이유는 아래 참고 자료들에서 도움받을 수 있습니다.

컴포넌트 기반

하나의 기능 구현을 위해 여러 코드들을 묶어놓은 것을 컴포넌트라고 합니다.
React에서는 이러한 컴포넌트를 기반으로 프로그램을 개발합니다.
또한 컴포넌트는 재사용이 용이하기 때문에 유지 보수와 유닛 테스트에 유리합니다.

범용성

React는 프레임워크에 종속되지 않고 여러 프로젝트에서 도입할 수 있습니다. 또한 (지금은 Meta로 변경한)Facebook에서 관리되고 있으며 가장 큰 사용자 커뮤니티를 형성하고 있기 때문에 사용자 입장에서는 안정적으로 사용할 수 있습니다.

2. map을 이용한 배열 반복

그동안 JSX로 컴포넌트의 return 부분에서 바로 map()메서드를 사용하는 방식만을 익혀왔는데, map() 메서드에 전달할 콜백 함수를 미리 정의해 사용하는 방법을 배웠습니다.
우선 컴포넌트의 return문에서 바로 map() 메서드를 사용하면 다음과 같습니다.

const posts = [
  {id: 1, name: 'Lee', message: 'Hello'},
  {id: 2, name: 'Kim', message: 'World'}
]

// PostItem 컴포넌트
function PostItem(){
	return(
    	<div className="post-wrapper">
        	{/* JSX 표현식으로 작성합니다. */}
        	{posts.map((post)=>{
        		return (
                	<div key={post.id}>
                    	<h3>{post.name}</h3>
						<p>{post.message}</p>
                    </div>
                )
        	})}
        </div>
	)
}

map() 메서드에 전달할 콜백함수를 미리 작성해 전달하는 방법은 아래와 같습니다.

// posts라는 더미 데이터를 생성합니다.
const posts = [
  {id: 1, name: 'Lee', message: 'Hello'},
  {id: 2, name: 'Kim', message: 'World'}
]

// PostItem 컴포넌트
function PostItem () {
  // map() 메서드에 전달할 콜백 함수
  const postToElement = (post) => (
    <div key={post.id}>
      <h3>{post.name}</h3>
      <p>{post.message}</p>
    </div>
  );
  
  // map() 메서드에 postToElement를 콜백 함수로 전달하고 결과값을 postList에 저장합니다.
  const postList = posts.map(postToElement);
  
  // JSX 표현식으로 작성합니다.
  return <div className="post-wrapper">{postList}</div>;
}

리스트 아이템 컴포넌트 생성

개별 아이템들을 컴포넌트 단위로 따로 구현하고, map() 메서드의 콜백 함수로는 아이템 컴포넌트를 return 하는 방식으로 반복하는 방법입니다. 프로젝트나 개별 리스트 아이템 코드의 양이 많아질 때 유리한 방식이라고 생각합니다.
즉 리스트 컴포넌트에는 map() 으로 개별 아이템 컴포넌트를 반복하는 동작을 구현하고, 개별 아이템의 내용은 아이템 컴포넌트를 구현함으로써 분리합니다. 이 때 각각의 컴포넌트에 props로 데이터를 전달해줍니다. (나중에 props에 대해 배울 때 이 부분도 다룰 것으로 예상됩니다.)

const posts = [
  {id: 1, name: 'Lee', message: 'Hello'},
  {id: 2, name: 'Kim', message: 'World'}
]

// PostList 컴포넌트: 개별 아이템 컴포넌트를 반복하는 동작만을 수행합니다.
function PostList(){
	return (
      		<div>
        		{posts.map((post)=> {
                      return <PostItem item={post} key={post.id} />
                    })}
           </div>)
}

// PostItem 컴포넌트: 개별 아이템들에 대해 정의하는 아이템 컴포넌트입니다.
function PostItem({item}){
	return(
    	<div>
        	<h3>{item.name}</h3>
        	<p>{item.message}</p>
        </div>
    )
}