[React] 공식 문서 스터디 1-1. Your first component | 첫 번째 컴포넌트

목차
0. 시작하기

1. 컴포넌트 : UI 구성 요소

2. 컴포넌트 정의하기

3. 컴포넌트 사용하기

  3-1. 브라우저에 표시되는 내용

  3-2. 컴포넌트 중첩 및 구성

 

0. 시작하기

💡학습 내용

• 컴포넌트가 무엇인지
• React 어플리케이션에서 컴포넌트의 역할
• 첫 번째 React 컴포넌트를 작성하는 방법

 

1. 컴포넌트 : UI 구성요소

• React를 사용하면 컴포넌트(마크업, CSS, JavaScript를 앱의 재사용 가능한 UI)로 결합 가능
• 내부적으로는 동일한 HTML 태그 사용
• 재사용 가능 → 개발 속도가 빨라짐

 

2. 컴포넌트 정의하기

• React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수
• 마크업 + 상호작용

 

step1 : 컴포넌트 내보내기

export dault 구문 사용

step2 : 함수 정의하기

• React 컴포넌트는 항상 대문자로 시작
• 함수명이 꼭 대문자일 필요는 없다
• JSX 안에서 컴포넌트가 사용될 때에는 반드시 대문자로 시작

step3 : 마크업 추가하기

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

 

• HTML처럼 작성되었지만 JavaScript => JSX
• JavaScript 안에 마크업 삽입 가능
• 한 줄로 모두 작성 혹은
• return 키워드와 다른 줄에 작성할 경우 괄호로 꼭 묶기

 

3. 컴포넌트 사용하기

• 다른 컴포넌트 안에 중첩 사용 가능
• Profile 컴포넌트를 사용하는 Gallery 컴포넌트

function Profile() {
    return (
        <img src="" alt=""/>
    );
}

export default function Gallery() {
    return (
        <section>
            <Profile />
            <Profile />
            <Profile />
        </section>
    );
}

 

3-1. 브라우저에 표시되는 내용

• <section> : 소문자 → React는 HTML 태그를 가리킨다고 이해
• <Profile /> : 대문자 → React는 Profile이라는 컴포넌트를 사용한다고 이해

3-2. 컴포넌트 중첩 및 구성

• 컴포넌트는 일반 JavaScript 함수
• → 같은 파일에 여러 컴포넌트 포함 가능
• _import or export_로 별도의 파일로 옮길 수 있음
• Profile 컴포넌트는 Gallery(부모 컴포넌트)내에 렌더링
• 어디든지 여러번 재사용 가능 !!!

 

⚠️주의

• 컴포넌트는 다른 컴포넌트 렌더링 가능하지만 정의 중첩 불가
• 컴포넌트 안에서 새로운 컴포넌트 정의 불가
• 자식 컴포넌트에 부모 컴포넌트 일부 데이터가 필요한 경우 → props로 전달

Never define a comonent inside another component!

Declare component at the top level

 

---

https://react.dev/learn/describing-the-ui#your-first-component

Describing the UI – React

해당 문서를 공부하며 작성하였습니다

피드백은 언제나 환영입니다 !