React 03. Component
이번에는 간단하게 컴포넌트를 하나 만들어보려고 한다.
만들기에 앞서 react에는 함수기반
그리고 클래스 기반
으로 코드를 작성해 나가는데 나는 여기서 함수 기반으로 코드를 작성했다.
많은 유투브에서 함수기반을 사용하기도 했고 둘 다 조금씩 접해보니 함수 기반이 뭔가 더 깔끔하고 이해하기 쉬웠기 때문에 함수 기반으로 쭉 나가기로 결정했다.
4. Component 만들기
일단은 src안에 components 폴더를 만들었고 그 안에 Book.js 파일을 하나 만들어줬다.
이제 Book.js 저 파일이 하나의 컴포넌트가 되는 것이다.
Book.js의 코드는 이렇게 간단하게 작성해준다.
이때, 함수는 return 할때 하나의 div만을 return할 수 있다.
무슨 말이나면
//이렇게는 안됨!!
return (
<div>
<h1>hi</h1>
</div>
<div>
<h1>hi</h1>
</div>
)
이렇게는 리턴을 할 수 없다는 것이다.
//이렇게는 안됨!!
return (
<div>
<div>
<h1>hi</h1>
</div>
<div>
<h1>hi</h1>
</div>
</div>
)
항상 이렇게 최상위 div로 감싸서 하나로 만들어 넘겨줘야한다.
(이에 관해서 React.Fragment가 있는데 유익한 내용이니 궁금하면 찾아보길!)
아무튼 위와 같이 Book.js에 코드를 작성하면 하나의 컴포넌트는 이미 만든 것이다. 이제 이 만든 컴포넌트를 App.js에 가져가서 사용해 볼 것이다.
이전에 썻던 Hello World는 지우고
Book.js에서 작성했던 Book 함수를 먼저 import 해준다(2 line)
그리고 7번 라인에서 같은 이름으로 작성하여 사용해준다.
그러면
브라우저 화면에 이렇게 잘 컴포넌트가 등장한다.
컴포넌트를 만들 때는 한 파일 내에 작성하여 사용할 수 도 있지만, 최대한 분리해주는 것이 관리하기 편하다.
그래서 컴포넌트를 항상 분리해서 작성해주고 App.js에 가져와서 사용할 것이다.
그리고 나는 Book Component만 띄웠지만,
return할 때 최상위 div만 해주고 안에 다양하게 원하는대로 코드를 작성해주면 된다.
Author And Source
이 문제에 관하여(React 03. Component), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@meganatc7/React-03.-Component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)