🍩 Components: UI building blocks
앞서 말했듯이, React는 component를 통해 UI를 생성한다. 곧바로 그 방식에 대해 설명하기 전에 잠시 React를 잊고 기본으로 돌아가보자.
• Traditional UI Building
기본적으로, Web은 HTML을 이용하여 document를 구성한다. HTML은 <h1>과 <li> 같은 태그를 이용하여 구성된다.
<article>
<h1>Computer Science</h1>
<ol>
<li>Operating System</li>
<li>Compiler Basics</li>
<li>Database System</li>
</ol>
</article>우리는 각 태그를 통해, 해당 document가 Computer Science를 제목으로 갖고 Operating System, Compiler Basics, Database System이라는 항목을 갖는 문서임을 알 수 있다. 이후 CSS를 이용하여 styling을, JavaScript를 이용하여 interactivity를 부여함으로써 우리는 UI를 얻게된다.
• React UI Building
💡 React lets you combine your markup, CSS, and JavaScript into custom Components : reusable UI element for your app
React는 makrup, CSS, JavaScript를 모아 component를 만들고, 해당 component들을 결합하여 UI를 구성한다.
<ArticlePage>
<ArticleTitle/>
<ArticleList/>
</ArticlePage>이전 HTML document를, 위와 같이 React를 이용해 구성이 가능하다. 주목할 점은 마치 HTML과 같이 component를 ordering하고 nesting이 가능하다는 점이다.
HTML document와 마찬가지로, component들의 이름들을 통해 각 component가 어떤 역할을 하는지 알 수 있다. 더 나아가, 해당 component들은 단순히 markup만이 아닌 CSS와 JavaScript를 모두 포함하고 있다.
🍪 Defining a component
그렇다면 component는 어떻게 만들 수 있을까?
💡 A React component is a JavaScript function that you can sprinkle with markup
자세한 과정에 대해 설명하기 이전에 항상 명심하자. React component는 JavaScript function이다.
• 1. Export the component
export default를 이용해 해당 function을 export한다. 자세한 내용은 MDN - export를 참고.
• 2. Define the function
function Profile() { ... }와 같이 JavaScript function을 정의한다.
🚨 Component를 정의하는 JavaScript function은 반드시 대문자로 시작해야 한다
• 3. Add markup
return <img src="..." />;와 같이 Component가 정의할 markup을 반환한다.
앞서 말했듯이, component는 결국 하나의 JavaScript function이다.이때 JavaScript function에서 갑자기 HTML을 반환하는 것이 매우 이상해 보일 수 있지만, 이는 사실 JSX라는 새로운 문법임을 인지하자.
🚨 Component가 여러 줄의 JSX로 이루어져 있을 경우
()를 이용해 묶어주는 것을 잊어버리지 말자
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);🥨 Using a component
위의 component 정의 방법대로, Box와 SubBox라는 component를 생성한다. Box component는 3개의 SubBox component를 갖는다.
function SubBox() {
return (
<p>SubBox</p>
);
}
export default function Box() {
return (
<section>
<h1>Below are SubBox</h1>
<SubBox />
<SubBox />
<SubBox />
</section>
);
}• What the browser sees
React는 Box component를 render할 때, <section>이 소문자인 것을 보며 이를 HTML tag로 인식한다. 반대로 <SubBox>가 대문자인 것을 보며 이를 React component로 인식한다.
아래는 결론적으로 브라우저에서 인식하는 마크업이다.
<section>
<h1>Below are SubBox</h1>
<p>SubBox</p>
<p>SubBox</p>
<p>SubBox</p>
</section>• Organizing components
계속해서 강조하고 있듯이 component는 JavaScript function이므로, Box와 SubBox의 예시처럼, 하나의 파일 내에 여러 component가 존재할 수 있다. 또한 export와 import를 통한 파일의 분리 역시 가능하다.
언제나 그렇듯 trade-off는 존재한다. Component들의 크기가 작고 밀접하게 연관되어 있을 경우 파일의 분리는 직관성을 해칠 수 있다. 반대로, 하나의 파일에 복잡하거나 너무 많은 component들을 넣는 것 역시 직관성을 해칠 수 있다.
• Nesting components
Box component에서 SubBox component를 3번 호출하듯이 component는 HTML과 같이 nesting이 가능하다.
💡 This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like
각 component들은 오직 한번의 작성 이후 단순히 호출을 통해 다른 component 내에서 사용될 수 있다. React에서 강조하듯이 이는 굉장히 강력한 무기이다. Component를 통해 React는 HTML, CSS, JavaScript에서는 제공하지 않던 강력한 reusability를 얻게 된다.
🚨 Component의 정의는 nest 되어서는 안된다. 이는 매우 느린 속도와 버그를 발생시킬 수 있다.
export default function Box() {
function SubBox() {
// ...
)
// ...
}🧁 Components all the way down
React application은 하나의 "root" component에서 시작된다. 예를 들어, Next.js의 경우, pages/index.js 내에 root component가 이미 정의되어 있다.
대부분의 React app의 경우, 이러한 root component가 페이지 자체를 "take over"하게 만든다. 즉, 완전히 비어있는 HTML file에, React function들이 호출되며, component 내에 정의된 markup들이 순차적으로 적히도록 한다. 그러나, 당연히 이는 HTML과 비교했을 때 성능적으로 느리다.
따라서 React-based frameworks는 React component들로 부터 자동으로 HTML을 생성한다. 이를 통해 JavaScript 코드가 실행되게 이전에 app에 content를 보여줄 수 있다.
또한, 특정 website에서는 React를 단순히 HTML page에 interactivity를 추가하는 데 사용된다. 이 경우, 하나의 root component가 전체 페이지를 독점하는 것이 아닌 여러 root component를 갖게된다.
React는 framework가 아닌 단순히 UI의 구현을 돕는 library임을 인지하자. 물론, 다양한 syntax를 통해 구현의 편리함을 가져다 줄 수는 있지만 항상 React가 정답이 아니라는 것을 명심하자.
🥞 Pages to link
- Imporint and Exproting Components
- JSX
- very slow and causes bugs
- React-based frameworks
- add interactivity to existing HTML pages
