05. 컴포넌트

작성자:

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프로젝트의 정보와 종속성 관리를 위한 설정 파일이다.
여기에는 프로젝트에서 사용되는 라이브러리와 모듈들이 명시되어 있으며,
각 의존성의 버전도 함께 기록된다.
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는 뭐가 다를까요?

둘다 같다.

우리는 전통적인 웹 개발에서 HTML로 구조를 만들고, CSS로 디자인을 적용하며, JavaScript로 동작을 구현했다.

그러나 리액트 환경에서는 HTML 문서에 들어갈 태그들을 JavaScript로 생성하게 되며, 이때 사용하는 문법이 바로 JSX다. 이 JSX로 작성된 코드를 우리는 컴포넌트라고 부른다.

리액트에서 디자인은 여전히 CSS로, 동작은 JavaScript로 개발하게 된다.

하지만 리액트는 컴포넌트와 기능을 모두 JavaScript로 작성하다 보니, .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. 컴포넌트 규칙

Info: 컴포넌트 3원칙

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

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

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

▶ 아픈화면

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

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

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

▶ 건강한화면

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

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

위의 코드는 4개를 반환 하므로 오류가 납니다.
div 나 리액트의 <></> (fragment) 요소를 사용하여 감싸야 합니다.
return 함수는 최상위 요소 하나만을 반환 하도록 수정 해주세요.

💬 fragment란?

최상위 요소를 래핑해야 하는 조건 때문에 구조가 복잡해 질수 있습니다.

이때 사용할수 있는것이 Fragment 입니다.

ReactFragment 사용전 과 사용후 비교

Fragment 는 <></> 빈 태그로도 작성할수 있습니다. 

아래처럼 수정해야 합니다

▶ 건강한화면

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

Info: 컴포넌트를 구현할때는 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.  문제

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

주어진 소스 이미지를 활용하거나 직접 원하는 이미지를 활용해도 된다.
건강한 화면과 같은 컴포넌트를 만들어보자.

  • 소스이미지
http://qwerew.cafe24.com/images/pet-2.jpg
http://qwerew.cafe24.com/images/pet-3.jpg
http://qwerew.cafe24.com/images/pet-4.jpg

▶ 건강한화면

입문

댓글 남기기