Your First Component

컴포넌트 정의

1단계: 컴포넌트 내보내기

표준 JavaScript 구문에서 export default 키워드로 현재 파일에 존재하는 컴포넌트를 내보낼 수 있다. 내보내게 되면 다른 파일에서 이 컴포넌트를 import 해와서 사용할 수 있다.

 

2단계: 함수 정의

컴포넌트도 결국 React에서 화면에 렌더링하기 위한 함수이다. 따라서 함수를 정의해주면 된다. 이 때 주의할 점은 React 컴포넌트 또한 일반 JavaScript 함수라고 말했지만, 이름은 무조건 대문자로 시작해야 한다. 그렇지 않으면 일반 HTML 태그로 인식하기 때문에 작동하지 않는다.

 

3단계: 마크업 추가

만약 img 태그를 반환한다고 하면 다음과 같이 작성할 수 있다. HTML 처럼 보이지만 JavaScript이다. (JSX)

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

 

하지만 마크업이 return 키워드와 같은 줄에 있지 않으면 괄호로 묶어주어야 한다.

// 아래와 같이 최상위 태그로 묶어주거나,
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

// 태그가 하나만 있을 경우인데 한줄에 쓰기 싫을 경우는 다음과 같이 해주면 된다
return (
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
);

 

괄호가 없다면 return 다음 줄의 코드는 무시되니까 주의하자!

 

 

컴포넌트 사용

컴포넌트를 만들었으면 다음과 같이 다른 컴포넌트 안에 중첩이 가능하다. 그리고 다른 파일에서 사용할 수 있도록 export 키워드로 내보낼 수 있다.

 

브라우저가 보는 것

태그가 대문자로 시작하는지 소문자로 시작하는지 유의하면서 보면 된다.

• <section>은 소문자이므로 HTML 태그이다.
• <Profile />은 대문자로 시작하므로 React의 컴포넌트라는것을 나타낸다.

결국 브라우저에 표시되는 내용은 HTML로 변환되어 다음과 같다.

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

 

 

Challenge

다음 문제들이 정상적으로 동작하도록 코드를 바꾸면 된다.

 

1. 컴포넌트 내보내기

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

언뜻 봐서는 문제가 없어보이는 코드이다. 하지만 해당 컴포넌트를 export 하지 않았기 때문에 화면에 렌더링 할 수 없다. (다른곳에서 사용하거나 불러올 수 없다) 따라서 다음과 같이 고치면 된다.

 

// 1. 키워드를 함수 앞에 붙일 경우
export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

// 2. 키워드를 따로 사용할 경우
function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

export default Profile;

 

 

2. 반환문 수정

export default function Profile() {
  return
    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

 

위에서 말했듯이, return문 옆에 한줄로 쓰지 않는다면 다음 줄은 무시된다. 따라서 다음과 같은 방법으로 고칠 수 있다.

export default function Profile() {
  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

 

혹은 return 키워드 밑에 사용하고 싶다면 괄호로 묶어주면 된다.

export default function Profile() {
  return(
    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />
  )
}

단, 괄호 안에 넣을 경우에는 한 줄로 썼을 경우와 다르게 끝에 세미콜론(;)이 빠진다는것에 주의해야 한다.

 

 

 

3. 실수 찾기

function profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <profile />
      <profile />
      <profile />
    </section>
  );
}

 

위에서 말했듯이, 일반 HTML 태그와 React 컴포넌트에는 이름을 짓는데 차이가 있다. 태그가 소문자로 시작하게 되면 일반 HTML 태그로 인식이되고, 앞에 대문자로 시작하게 되면 우리가 만든 컴포넌트로 인식이 되어 사용할 수 있다. 따라서 다음과 같이 고치면 된다.

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

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

 

 

4. 나만의 컴포넌트

<h1>Good job!</h1>이 포함되어 있는 Congratulations 컴포넌트를 만들어보자.

// Write your component below!
export default function Congratulations() {
  return <h1>Good job!</h1>;
}