[React 공부] 1-1. 첫 컴포넌트 만들기

 

Your First Component – React

 

 

 

---

 

 

 

컴포넌트란?

 

 

Web에서 HTML은 태그를 통해 더 다양한 구조를 제공해준다

 

<article> // 독립적인 컨텐츠를 위해 사용
  <h1>My First Component</h1> // 제목
  <ol> // Ordered List 사용
    <li>Components: UI Building Blocks</li> // 리스트 element
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

 

 

이런 마크업을 통해 CSS 스타일링과 더해져 웹에 있는 모든 내용을 볼 수 있게 된다

 

리액트는 이런 마크업, CSS, 자바스크립트를 합쳐서 Component를 구사하는데,

이는 재사용 가능한 UI 및 모든 정보를 새로고침 할 필요를 줄일려고 만들어졌다

 

예를 들어 네비게이션 바를 모든 페이지에서 사용한다고 가정해보자

 

<PageLayout>
    <Page1> // 매 페이지 마다 Navbar을 사용해야됨
        <Navbar />
        <OtherStuff />
    </Page1>
    <Page2>
    	<Navbar /> // Navbar 수정을 하면
        <OtherStuff /> // OtherStuff까지 새로고침 할 필요 없음
    </Page2>
    <Page3>
    	<Navbar />
        <OtherStuff />
    </Page3>
</PageLayout>

 

 

이런 유용성 때문에 수정하기 편리하고 유저에게 보여지는 랜더링에도 역시 큰 도움이 된다

 

 

 

---

 

 

 

컴포넌트 구성

 

 

export default function Profile() { //Export 및 함수 이름
  return (
    <img // JSX
      src="SomeImgSrc"
      alt="SomeAltText"
    />
  )
}

 

 

1. 메인 함수 정의

React에서 main function은 export default를 통해 정의한다

 

2. 함수 정의

function Profile() 로 함수의 이름을 만들어야된다

 

3. 마크업 정의

React는 JS 로직과 HTML을 합친 JSX 구성을 통해 만들어진다

 

 

 

---

 

 

 

컴포넌트 사용하기

 

 

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

export default function Gallery() {
  return (
    <section>
      <h1>그냥 대충 아무 제목</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

 

 

• export default를 통해 function Gallery()가 메인 함수인것을 알수가 있다
• Gallery()에서 JSX를 리턴하는데 여기에 <Profile />이 3개가 있는것을 볼 수 있다
• 위에 Profile을 3번 불러와 그대로 넣은것과 똑같다 - 아래와 똑같다

 

export default function Gallery() {
  return (
    <section>
      <h1>그냥 대충 아무 제목</h1>
      <img src="someSrc" alt="someAlt" />
      <img src="someSrc" alt="someAlt" />
      <img src="someSrc" alt="someAlt" />
    </section>
  );
}

 

 

※ 참고 내용 ※

• <section> 같이 소문자면 HTML 태그라는것을 알수가 있다
• <Profile /> 같이 대문자면 리액트 컴포넌트라는 것을 알수가 있다