컴포넌트

유형

실습문서

주제

리액트기본

순번

2

태그

설명

컴포넌트PART1

컴포넌트PART2

컴포넌트PART3

1. 리액트컴포넌트

1.1. 리액트 앱 구조

1.1.1. 이미지 리소스 주소

수업에 사용할 이미지 파일의 주소 입니다.

http://qwerew.cafe24.com/images/pet-1.jpg

http://qwerew.cafe24.com/images/pet-2.jpg

http://qwerew.cafe24.com/images/pet-3.jpg

http://qwerew.cafe24.com/images/pet-4.jpg

http://qwerew.cafe24.com/images/pet-5.jpg

http://qwerew.cafe24.com/images/pet-6.jpg

http://qwerew.cafe24.com/images/pet-7.jpg

http://qwerew.cafe24.com/images/pet-8.jpg

1.1.2. 리액트 앱의 폴더 구성

리액트 앱의 폴더와 파일의 구성과 역할을 알아봅시다.


react-test/
  |-node_modules/ # 의존성 파일을 담은 폴더
  |- src/
    |- App.js        # 최상위 컴포넌트
    |- index.js          # 앱 진입점 파일 (Entry Point)
  |- public/
    |- index.html        # HTML 템플릿 파일과 정적 리소스를 담은 폴더
  |- package.json         # 프로젝트 정보와 종속성 관리 파일

node_modules는 의존성 파일들이 저장되는 폴더다. 이 폴더 내의 파일들은 프로젝트에서 사용하는 외부 라이브러리와 모듈들을 포함하고 있으며, 관련 정보는 package.json 파일에 기록된다.
src 폴더는 실제 소스 코드가 위치하는 곳이다. 이곳에서는 애플리케이션의 주요 로직과 기능들이 구현된다.
public 폴더는 정적인 리소스들과 HTML 템플릿 파일(index.html)이 위치하는 곳이다. 이 폴더에 포함된 파일들은 빌드 과정에서 결과물에 자동으로 포함되며, 이 파일들이 최종적으로 사용자에게 제공된다.
package.json 파일은 프로젝트의 정보와 종속성 관리를 위한 설정 파일이다. 여기에는 프로젝트에서 사용되는 라이브러리와 모듈들이 명시되어 있으며, 각 의존성의 버전도 함께 기록된다.
package-lock.json 파일은 package.json보다 더 세부적인 정보를 담고 있는 설정 파일로, 시스템에서 자동으로 관리된다. 이 파일을 임의로 수정하면 의도치 않은 오류가 발생할 수 있다.
App.js 파일은 최상위 컴포넌트로, 리액트 애플리케이션의 핵심적인 부분을 구성한다. 리액트는 작은 컴포넌트 단위로 구성되며, App 컴포넌트는 이들 작은 모듈들을 하나로 묶어주는 역할을 한다.
index.js 파일에서는 ReactDOM.render() 함수를 사용하여 최상위 컴포넌트인 App 컴포넌트를 실제 DOM에 마운팅한다. 이 파일은 애플리케이션의 엔트리포인트로, 주로 라우팅 설정이나 상태 관리 등의 초기화 작업이 이곳에서 이루어진다. 아래 이미지의 root.render() 함수는 public 폴더의 index.html 문서와 리액트 DOM을 연결하는 역할을 한다. 아래의 코드는 App 컴포넌트를 DOM에 넣어 화면에 그리겠다는 의미 이다.

src/index.js

src/index.js

🗒️ 위의 파일과 폴더는 리액트의 핵심요소이며 파일명,폴더명 혹은 구조를 변경해서는 안된다.

1.2. 컴포넌트 만들기

리액트의 컴포넌트란
반복 사용되는 UI요소를 함수로 만드는것 이다.
여기서 UI요소란 html의 태그들로 만들어지는 구조이고 함수란 자바스크립트의 함수 이다

컴포넌트

컴포넌트는 포함관계를 가질수 있으며 위계에 따라 부모와 자식으로 나뉘어진다.

간단한 컴포넌트를 생성해보자.

src폴더에 Child.jsx 파일을 생성한다. 컴포넌트 파일의 확장자는 js 나 jsx 사용할 수 있으나 파일명은 반드시 대문자로 시작해야 한다.

//src/Child.js

function Child() {
  return <h3>나는 자식입니다.</h3>;
}

export default Child;

‣

💡 js 와 jsx는 뭐가 다를까요?

src / App.js 파일을 수정한다.

//src/App.js

import logo from './logo.svg';
import './App.css';
import Child from './Child';

function App() {
 return (
 	<div>
 		<h1>안녕하세요</h1>
 		<Child />
 		<Child />
 		<Child />
 		<Child></Child>
 	</div>
 );
}

export default App;

Child.js 의 Child 함수의 반환값은 태그이다.
App.js 에서 Child.js의 Child 함수를 임포트 한 후 App함수 바디의 반환 값으로 넣었다. 이처럼 태그를 함수로 만드는것이 컴포넌트 이다. 컴포넌트는 한번 선언해 놓으면 필요할때 어디서나 호출해서 사용할수 있어 코드의 유연성 및 확장성이 높아진다.

1.2.1. 컴포넌트 규칙

컴포넌트 3원칙

컴포넌트는 다른 컴포넌트를 포함할수 있으나 컴포넌트 내부에 다른 컴포넌트를 정의하면 안됩니다.
최상위 요소는 유일 해야 합니다.
막음 태그가 없을 경우 / 를 반드시 작성합니다

1. 컴포넌트를 중첩해서 선언할수 없습니다.

그림 처럼 Syntax1 컴포넌트의 return문 내부에 또 컴포넌트를 선언할 수 없습니다.

그림 처럼 Syntax1 컴포넌트의 return문 내부에 또 컴포넌트를 선언할 수 없습니다.

▶ 아픈화면

🔗공식홈:컴포넌트학습하기

화면은 잘 렌더링 됩니다. 하지만 위의 공식 사이트의 가이드를 읽어보면 중첩선언은 속도가 매우 느리고 잠재적으로 버그를 유발하기 때문에 사용하지 말라고 되어 있습니다.

아래처럼 수정해야 합니다.

▶ 건강한화면

2. 최상위 요소는 한개만 반환

컴포넌트는 반드시 UI요소를 한개만 반환해야 합니다.

위의 코드는 4개를 반환 하므로 오류가 납니다.

div 나 리액트의 <></> (fragment) 요소를 사용하여 감싸야 합니다.

return 함수는 최상위 요소 하나만을 반환 하도록 수정 해주세요.

‣

💬 fragment란?

아래처럼 수정해야 합니다

▶ 건강한화면

3. 컴포넌트의 태그는 반드시 닫는다

컴포넌트를 구현할때는 JSX 를 사용합니다.

JSX 는 Javascript Syntax Extention 의 약자로 자바스트립트의 확장문법이라는 뜻입니다.

컴포넌트를 화면에 렌더링 할때는 html 태그를 마크업 하듯 컴포넌트 함수명을 <> 안에 씁니다. 예시) <컴포넌트명>

이 단계는 자바스크립트 에서 함수를 호출하는 단계와 같습니다.

html 은 <div></div> 같은 일반태그 와 <input> , <br> 같은 단일태그가 있듯

JSX의 태그도 (⇒컴포넌트) 필요에 따라 두가지를 다 사용할수 있습니다.

일반태그 <컴포넌트명> 커플🧟‍♀️🧟‍♂️ </컴포넌트명>
단일태그 <컴포넌트명 /> 싱글❤

html 과 차이점은 단일태그 뒤에 / 기호가 없으면 오류가 발생합니다.

오류가 뜹니다

▶ 아픈화면

아래처럼 수정해야 합니다

▶ 건강한화면

1.2. 컴포넌트 내보내기

컴포넌트는 반복해서 사용해야 하는 UI 요소를 함수처럼 만들어 재사용할 수 있도록 개발된 기술로 이해할 수 있다.
따라서, 컴포넌트는 외부에서 쉽게 불러와 꺼내쓸수 있도록 작성하는 것이 중요하다.
이번에는 컴포넌트를 외부로 내보내는 방법에 대해 알아본다

1.2.1. 컴포넌트 내보내는 2가지 방법

종류	내보낼때	불러올때
파일에서 컴포넌트를 한개만 내보내는 경우	`export default 컴포넌트명`	`import 컴포넌트명 from './컴포넌트명.js';`
파일에서 컴포넌트를 여러개 내보내는 경우	`export { 컴포넌트명 }`	`import { 컴포넌트명 } from './컴포넌트명.js';`

1.2.3. Member 컴포넌트를 만들고 내보내기 (default export )

src/Meber.js 컴포넌트를 만들고 외부로 내보낸다. 이때 default export 를 사용해보자.

const Member = () => {
 return (
 	<>
 		<span> 이름: </span>
 		<span> 김망고</span>
 	</>
 );
};
export default Member;

1.2.4. Picture 컴포넌트를 만들고 외부로 내보내기 (named export)

src/Picture.js 컴포넌트를 만들고 외부로 내보낸다. 이때 named export 방법을 사용해보자.

const Picture = () => {
 return (
 	<>
 		<span> 사진: </span>
 		<img src="http://qwerew.cafe24.com/images/pet-7.jpg" alt="" />;
 	</>
 );
};

export { Picture };

1.2.4. App 컴포넌트에서 임포트 하기

src/App.js 컴포넌트를 열고 아래와 같이 코드를 수정해보자. 이때 각각 다른 방식으로 내보낸 컴포넌트를 불러올때의 차이점을 기억하자.

import './styles.css';
import { Picture } from './Picture';
import Member from './Member';

export default function App() {
 return (
 	<div className="App">
 		<Member />
 		<Picture />
 	</div>
 );
}

1.3. 문제

자신만의 컴포넌트를 만들어보자

주어진 소스 이미지를 활용하거나 직접 원하는 이미지를 활용해도 된다.

건강한 화면과 같은 컴포넌트를 만들어보자.

소스이미지

http://qwerew.cafe24.com/images/pet-2.jpg
http://qwerew.cafe24.com/images/pet-3.jpg
http://qwerew.cafe24.com/images/pet-4.jpg

▶ 건강한화면