props로 데이터 표시하기 - 속성 Props | React

props로 데이터 표시하기 Displaying Data with Props

❗ 이전 글과 이어지니 먼저 읽어주세요!

 

---

Header 컴포넌트를 재사용하고 싶다면 두 번 선언하면 됩니다.

<div>
	<Header />
    <Header />
</div>

 

텍스트를 전달하거나 외부 소스로부터 데이터를 가져와서 표시해야 할 정보를 미리 알지 못하는 경우라면,

일반적인 HTML 요소들은 각 요소의 동작에 따라 변하는 데이터들을 전달하는 데 사용할 수 있는 속성들을 가지고 있지요.

<img>의 src, <a>의 href, 등...

동일하게, React 컴포넌트에 속성 props으로 데이터를 전달할 수 있습니다.

Javascript 메소드와 비슷하게, 컴포넌트 동작 또는 화면이 표시될 때 보여줄 내용을 변경하는 커스텀 파라미터(=속성)를 갖는 컴포넌트를 디자인할 수 있습니다.

또한 이 속성들은 부모 컴포넌트에서 자식 컴포넌트로 물려줄 수도 있죠.

💡 React에서 데이터는 컴포넌트 트리 아래 방향으로 흐름 > 단방향 데이터 흐름

 

속성 사용하기 Using props

부모 컴포넌트에서 HTML의 속성처럼 자식 컴포넌트에 커스텀 속성을 전달할 수 있습니다.

전달한 속성들은 자식 컴포넌트 function의 첫 번째 파라미터 object 타입인 props로 받습니다.

<Header title="Start React" />

 

function Header(props) {
	// ...
}

// destructuring
function Header({ title }) {
	// ...
}

 

JSX에서 변수 사용하기 Using variables in JSX

중괄호 {}는 JSX에서 일반 Javascript를 바로 사용할 수 있는 특별한 구문입니다.

JSX 영역 안에 있는 중괄호는 Javascript 영역이라고 생각할 수 있습니다.

따라서 중괄호 내에서는 모든 Javascript 문법을 사용할 수 있습니다.

• object 속성
  

  <h1>{props.title}</h1>

• template literal
  

  <h1>{`Cool ${title}`}</h1>

• 메소드 결과값
  

  function createTitle() {
  	return title ? title : "Default Title";
  }
  <h1>{createTitle()}</h1>

• 삼항연산자
  

  <h1>{title ? title : "Default Title"}</h1>

 

리스트 반복하기 Iterating through lists

일반적으로 화면에 표시해야 하는 데이터가 리스트 형태인 경우는 많죠.

데이터를 수정하고, 다른 정보들을 동일한 스타일로 UI 요소들을 생성하는데 array 메소드를 사용할 수 있습니다.

array.map 메소드를 사용하여 배열을 반복할 수 있고 화살표 함수(arrow function)를 사용할 수 있습니다.

const names = [...];

<ul>
	{
    	names.map(item => (
        	<li>{item}<li>
        ))
    }
<ul>

 

이렇게 실행해 보면, "key 속성이 없다"는 warning을 볼 수 있습니다.

React는 배열에서 동일한 아이템을 구별하기 위한 정보가 필요한데, DOM에서 어떤 요소를 업데이트할지를 알기 위함입니다.

💡 지금은 이름이 고유하니 사용할 수 있지만, ID와 같은 고유성이 보장된 값을 사용하기를 권장합니다.

<ul>
	{
    	names.map(item => (
        	<li key={item}>{item}</li>
        ))
    }
</ul>

 

 

 

React Foundations: Displaying Data with Props | Next.js