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 리액트 프로그래밍' 교재로 입문부터 전문가까지 (0) | 2024.12.31 |
