본문 바로가기
React

[React] React의 props 이해하기

by IT 정복가 2023. 1. 27.
728x90

props란?

  • properties의 줄임말으로써 컴포넌트의 입력값이다.
  • 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.

사용방법

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 

 

그럼, 저번에 컴포넌트까지 만들어 놓은 코드에 props를 적용해 보자.

아래 코드는 저번까지 했던 코드이다.

import logo from "./logo.svg";
import "./App.css";

function Header() {
  return (
    <header>
      <h1>
        <a href="#">WEB</a>
      </h1>
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <ol>
        <li>
          <a href="/read/1">html</a>
        </li>
        <li>
          <a href="/read/2">css</a>
        </li>
        <li>
          <a href="/read/3">js</a>
        </li>
      </ol>
    </nav>
  );
}

function Article() {
  return (
    <article>
      <h2>Welcome</h2>
      Hello, WEB
    </article>
  );
}
function App() {
  return (
    <div>
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

export default App;

만약 Header 부분이 WEB이 아니라 React로 나오게 하고 싶다면 어떻게 해야할까?

Header함수 a태그의 내용을 직접 React라고 변경해도 되지만

props를 사용해서 변경하는 방법도 존재한다.

 

1. App함수의 <Header />에 속성을 부여하자.

import logo from "./logo.svg";
import "./App.css";

// 생략

function App() {
  return (
    <div>
      <Header title="React" />
      <Nav />
      <Article />
    </div>
  );
}

export default App;

나는 App함수의 <Header />에 title="React"인 속성을 부여했다.

 

2. Header함수의 첫번째 파라미터로 props를 주자.

import logo from "./logo.svg";
import "./App.css";

function Header(props) {
  return (
    <header>
      <h1>
        <a href="#">WEB</a>
      </h1>
    </header>
  );
}

//생략

(꼭 props가 아니고 아무 단어가 와도 되지만 모든 사람들이 props으로 사용하고 있기 때문에 props으로 쓰자.)

그렇다면 props에는 무엇이 들어있는지 확인해 보자. (console.log로 확인)

props에는 객체가 들어오는데 그 안의 내용은 title: 'React'가 들어있다. 

우리가 App함수의 <Header />에 부여한 속성이 잘 들어온 것을 확인할 수 있다.

우리가 Header함수에서 이것을 사용할 수 있게 되었다는 의미이다.

 

3. WEB이 있던 자리에 {props.title}을 넣어보자.

import logo from "./logo.svg";
import "./App.css";

function Header(props) {
  return (
    <header>
      <h1>
        <a href="#">{props.title}</a>
      </h1>
    </header>
  );
}

//생략

React라는 링크가 잘 출력된 것을 볼 수 있다.

 

이 기세를 몰아서 이번에는 App함수의 <Article />을 변경해 보자.

제목에는 welcome이 출력되고 본문에는 Hello Web이 출력되게 하려면 아래와 같이 작성해 주면 된다.

import logo from "./logo.svg";
import "./App.css";

//생략

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}
function App() {
  return (
    <div>
      <Header title="React" />
      <Nav />
      <Article title="welcome" body="Hello Web" />
    </div>
  );
}

export default App;

Article함수의 첫번째 파라미터로 props를 넘겨주고 아까처럼 값을 바꿔주면 된다.

이번에는 props를 사용하여 Nav함수를 변경해보자.

현재 li태그가 3개이지만 만약 이보다 더 많은 li태그가 있고 그것을 변경해야 할 때

아래와 같이 하드코딩을 하면 변경할 때 굉장히 귀찮을 것이다.

우리는 이것을 props로 해결할 수 있다.

import logo from "./logo.svg";
import "./App.css";

//생략

function Nav() {
  return (
    <nav>
      <ol>
        <li>
          <a href="/read/1">html</a>
        </li>
        <li>
          <a href="/read/2">css</a>
        </li>
        <li>
          <a href="/read/3">js</a>
        </li>
      </ol>
    </nav>
  );
}

//생략

function App() {
  return (
    <div>
      <Header title="React" />
      <Nav />
      <Article title="welcome" body="Hello Web" />
    </div>
  );
}

export default App;

 

1. App함수에 배열을 저장하는 변수 1개를 생성하자.

import logo from "./logo.svg";
import "./App.css";

//생략

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div>
      <Header title="React" />
      <Nav />
      <Article title="welcome" body="Hello Web" />
    </div>
  );
}

export default App;

App함수의 return 위에 topics라는 배열을 저장하였고 각 인덱스에는 객체가 들어오고 각 객체에는 id, title,body의 정보가 들어있다.

 

2. 변수 topics를 <Nav />의 props으로 전달하자.

import logo from "./logo.svg";
import "./App.css";

//생략

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div>
      <Header title="React" />
      <Nav topics={topics}/>
      <Article title="welcome" body="Hello Web" />
    </div>
  );
}

export default App;

우리가 사용할 topics는 문자열이 아니기때문에 topics="topics"가 아니라 topics={topics}임을 주의하자.

 

3. Nav함수로 가서 첫번째 파라미터로 props를 전달한 후 아래와 같이 코드를 작성하자.

import logo from "./logo.svg";
import "./App.css";

//생략

function Nav(props) {
  const lis = [];
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

//생략

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div>
      <Header title="React" />
      <Nav topics={topics} />
      <Article title="welcome" body="Hello Web" />
    </div>
  );
}

export default App;

배열 lis라는 변수를 만들어 return값으로는 {lis}만 넘겨주자.

 

4. topics의 인덱스만큼 for문을 돌려 배열에 push하자.

import logo from "./logo.svg";
import "./App.css";

//생략

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li>
        <a href={"/read/" + t.id}>{t.title}</a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

//생략

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div>
      <Header title="React" />
      <Nav topics={topics} />
      <Article title="welcome" body="Hello Web" />
    </div>
  );
}

export default App;

여기까지 하면 아래와 같이 화면 상으로는 문제없이 잘 출력되는 것처럼 나온다.

하지만 콘솔창을 보면 문제가 있는 것을 확인해 볼 수 있다.

(우리가 동적으로 만들어 준 li 태그들은 각자 prop이라는 키를 가지고 있어야 하며 그 키값은 반복문 안에서 고유해야한다는 의미이다.)

 

이것을 해결하기 위해서는 li태그의 키값으로 고유한 값을 주면 된다.

id의 값은 li 태그마다 고유하기 때문에 키값으로 t.id를 넣어주었다.

//생략

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a href={"/read/" + t.id}>{t.title}</a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

//생략

에러 없이 잘 출력되는 것을 볼 수 있다.

우리의 코드는 props를 통해 어떤 값을 주는지에 따라 다르게 동작하는 컴포넌트가 되었다.

참고 영상

https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5 

 

728x90
저작자표시

'React' 카테고리의 다른 글

[React] state를 이용해 간단한 count 기능을 만들어보자  (0) 2023.02.03
[React] React의 state란?  (0) 2023.01.30
[React] React 컴포넌트(component)란?  (0) 2023.01.25
[React] React 코드 수정 방법  (0) 2023.01.23
[React] React 개발 환경 구축하기  (0) 2023.01.20

관련글

티스토리툴바