smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)

노마드코드님의 유튜브를 즐겨보는 구독자로서, 무료로 풀어두신 클론코딩 강의를 들어보고자 한다:)
드디어 본격적인 react 시작…!!
오늘은 react의 기본인 component에 대해서 알아볼 것이다.🤩
React로 영화 웹서비스 만들기
저번편은 여기로

Creating your first React Component🐾

우선 ‘npm start’를 해서 리액트를 실행시켜야 한다.

component

이미지1
위에 표시된 저 부분은 바로 component이다. 기본적으로 react는 copponent와 함께 동작한다.
component란, HTML을 반환하는 함수다.
react는 component를 이용해서 HTML처럼 작성하려는 경우에 필요하며,
javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다.
이것은 react가 설명한 유일한 개념이다:)

component 만들기💫

  • src 폴더 안에 Potato.js 파일을 생성한다.
    그리고 component를 작성할때마다 import React from "react" 를 써줘야만 한다.
    이것을 하지 않으면 react는 여기에 jsx가 있는 component를 사용하는 것을 이해하지 못한다.
import React from "react"

function Potato(){
    return(
        <h3>I love potato!</h3>
    )
}

export default Potato;

를 작성해주는데, 우선 Potato는 선언되었지만 아직 아무도 사용하고 있지 않은 상태다.
그래서 potato를 export 해주어야 한다.
그 부분이 바로 export default Potato 여기!

  • Potato.js 사용하기
    index.js에 우선 Potato를 import 시킨다.
    import Potato from "./Potato";
    그 다음, ReactDom에 Potato를 추가해준다.
    ReactDOM.render(<App /><Potato />, document.getElementById('root')); 이렇게!
    여기까지 하고 나서 페이지를 보면 짜잔 -!
    이미지2
    오류가 뜬다😭😭😭😭😭




  • 오류 해결
    이건 react Application이 하나의 component만을 rendering 해야하기 때문이다.
    그렇다면 위에서는 그 하나의 component가 당연히 App이 되겠지!
    그러므로 Potato를 app 옆에 두는 대신에 app안에 넣도록 해본다.
    index.js에 추가했던 것들을 일단은 다 지운다.
    그 다음 App.js 내부에 import Potato from "./Potato"; 를 입력해줄 거다!
    우리는 Hello 아래에 Potato를 사용할 거기 때문에,, 다음과 같이 코드를 입력해준다.
    이미지3




  • 🌝결과🌝
    이미지4
    위의 과정을 거치면 바로 이렇게 결과가 뜬다~~
    인사할 때부터 감자를 사랑한다고 다짜고짜 고백해버리는 감자러버 되어버리기,,, ㅎㅎ



    이미지5
    소스코드를 보면, 바로 이렇게 생성이 된다.
    Potato 라는 component를 가져와서 브라우저가 이해할 수 있는 평범한 HTML로 만든 것이다.
    이것이 바로 jsx!! ㅎ_ㅎ
    여기서 가장 중요한 포인트는 바로

    💥react Application은 하나의 component만을 rendering 할 수 있다는 점💥

    따라서 모든 것은 application 안에 들어가야 한다.
    application 안에 많은 component를 넣을 수 있고, 그 안에도 더 많은 component를 import 할 수 있다.

(+) ./의 의미

같은 디렉토리라는 의미이다:) 참고하시길~ ㅎㅎ

참고