Book Study/생활코딩! React 리액트 프로그래밍2025. 3. 18. 21:16

2일차 리액트 기초(04~05장) - 생활코딩! React 리액트 프로그래밍


04 컴포넌트 만들기

05 props

 

4장의 컴포넌트(component)와 5장의 props는 OOP(Object-Oriented Programming) 패러다임으로 투사해보면 각각 객체와 멤버변수(혹은 속성) 또는 메소드 인자에 대응시켜 볼 수 있겠다. 실제 팀원들이 제작한 FE 코드를 리뷰했을 때 내 기준으로는 관념적으로 동일했다.

일단 컴포넌트는 아래와 같은 html 코드가 있을 경우

<html>
  <header className="header">
    <nav>
      <ul className="nav-list">
        <li>Home</li>
        <li>Projects</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
</html>

아래처럼 서브루틴화 하는 것이었다.

function Header() {
  return (
    <header className="header">
      <nav>
        <ul className="nav-list">
          <li>Home</li>
          <li>Projects</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
  );  
}
 
function App() {
  return (
    <Header />
  );
}

여기서 App() 함수는 C/C++의 main() 같은 entry function이다. 그 안의 Header가 바로 컴포넌트다(엄밀히 말하면 App 역시 컴포넌트). 구조를 보면 컴포넌트끼리 has-a 또는 is-a 관계 성립이 가능해 보인다.

 

props는 컴포넌트에 전달할 인자라고 생각하면 되더라. props는 properties의 준말로 보인다. 용법을 보았을 때는 함수의 매개변수라고 칭해도 무방할 듯. 인자로 들어갈 자료형은 js가 제공하는 자료형 모두 가능한 것 같다. immutable이므로 컴포넌트가 수정을 가할 수 없다(이 부분이 마음에 드네).

위의 연습 코드에 prop을 간단히 적용해 보면

function Header(props) {
  return (
    <header className="header">
      <nav>
        <ul className="nav-list">
          <li>Home</li>
          <li>Projects</li>
          <li>About</li>
          <li>Contact</li>
          <li>{props.Other}</li>
        </ul>
      </nav>
    </header>
  );  
}
 
function App() {
  return (
    <Header Other = 'Custom' />
  );
}

익숙한 구조가 보인다.

 

교재에는 배열 데이타를 이용해 li 태그를 동적으로 생성하는 코드를 예시로 들었는데, 이럴 경우에는 key라는 prop이 필요하다고 한다. 예를 들면

<li key=... > text </li>

이런 식이다. GPT에게 물어보니 리액트의 가상DOM(Document Object Model)이 list 갱신 시 통째로 갱신하지 않고 변경된 부분만 갱신할 수 있도록 하기 위함이라고 한다. 즉, 성능 향상을 위한 정보.

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Book Study > 생활코딩! React 리액트 프로그래밍' 카테고리의 다른 글

5일차 리액트 기초(09~10장) - 생활코딩! React 리액트 프로그래밍  (0) 2025.03.20
4일차 리액트 기초(08장) - 생활코딩! React 리액트 프로그래밍  (0) 2025.03.20
3일차 리액트 기초(06~07장) - 생활코딩! React 리액트 프로그래밍  (0) 2025.03.19
1일차 리액트 기초(01~03장) - 생활코딩! React 리액트 프로그래밍  (0) 2025.03.17
'생활코딩! React 리액트 프로그래밍' 교재로 입문부터 전문가까지  (1) 2024.12.31
Posted by JMAN

티스토리툴바