Skip to main content

Your First Component

React를 사용하면 마크업, CSS 및 JavaScript 를 앱의 재사용 가능한 UI 요소인 사용자 정의 구성요소 로 결합할 수 있다. React 는 동일한 기술을 사용하면서도 상호작용을 최우선으로 생각하고 React 구성요소는 마크업을 뿌릴 수 있는 JavaScript 함수 이다.


01. Export the component 구성요소 내보내기#

export 로 컴포넌트를 가져오거나 내보낼 수 있다.


02. Define the function 함수 정의#

React 의 구성요소는 일반 JavaScript 함수이지만 이름은 대문자로 시작해야 한다.

그렇지 않으면 작동하지 않는다!!!

03. Add markup 마크업 추가#

JSX 구문을 사용하여 JavaScript 내에 마크업을 삽입할 수 있다.

반환문은 한줄에 모두 작성할 수 있지만, 같은 줄에 있지 않으면 return 마크업을 한 쌍의 괄호로 묶어야 한다.

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

04. Using a component 구성 요소 사용#

구성요소는 중첩되어 사용될 수 있다. 렌더링은 가능하지만 정의를 중첩해서 사용은 하지 못한다.

export default function Gallery() {  // 🔴 Never define a component inside another component!  function Profile() {    // ...  }  // ...}
export default function Gallery() {  // ...}
// ✅ Declare components at the top levelfunction Profile() {  // ...}

05. 과제 시도#

구성요소 내보내기

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

위의 코드의 오류로는 이렇게 제시되어있다.

요소 유형이 잘못되었습니다.

문자열(내장 구성 요소의 경우) 또는 클래스/함수(복합 구성 요소의 경우)가 필요했지만 개체가 있습니다.

구성 요소가 정의된 파일에서 구성 요소를 내보내는 것을 잊었거나 기본 가져오기와 명명된 가져오기를 혼합했을 수 있습니다.

이유는 function 을 export default 로 내보내지 않았기 때문에 정상적으로 작동하지 않는 것이다.


return 문 수정

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

해당 코드에서는 return 뒤에 한줄로 구성되거나 한줄로 구성되지않는 경우 괄호로 묶여야 하는데 묶이지 않아서 실행되지 않은 코드이다.


실수 찾기

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>  );}

이 코드에서 처음에는 export default 로 내보내기를 안해줘서 그런건가 싶었는데 한 모듈당 export default가 한번 사용가능한 것이었다..!

해당 내용은 조금 더 상세하게 봐야할 것 같아서 따로 정리해두려 한다.

결론적으로 , 위의 코드에서는 함수의 시작문자를 소문자로 하였기 때문에 렌더링이 안된 것이었다.


나만의 구성요소

export default function PrintCongratulations(){  return(    <div>      <h1>Good Job!</h1>      <h3>Congratulations!!!</h3>    </div>  );}

😊 내가 한번 만들어본... 구성요소이다.. ㅎㅎ