Header 컴포넌트에 div 말고 애초에 button은 안 되나... - 인프런

인프런 커뮤니티 질문&답변

green

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.7) 공통 컴포넌트 구현하기

Header 컴포넌트에 div 말고 애초에 button은 안 되나요?

해결된 질문

작성

수정됨

궁금한 점이 2가지 있는데요

1. Header 컴포넌트에 div 말고 애초에 button를 넣으면 안 되나요?

Header.jsx

const Header = ({ title, leftChild, rightChild }) => {
  return (

    <header className="Header">
      <button className="header_left">{leftChild}</button>
      <div className="header_center">{title}</div>
      <button className="header_right">{rightChild}</button>
    </header>
  );
};

App.jsx

<Header title={"Header"} leftChild={"Left"} rightChild={"Right"} />

이런 식으로 헤더 컴포에 처음부터 버튼 태그를 넣으면 될 것 같은데 왜 div로 감싸는 건가요?
음.. 그냥 css 편의상 이유일까요?

2. 저는 css를 배울 때 처음에 charset "utf-8"; 을 항상 입력하라고 배웠는데 리액트 강의에서는 항상 안 사용하시더라구요. 리액트에서는 원래 안 쓰는건가요, 아니면 그냥 강의에서는 굳이 필요없어서 쓰지 않는건가요?

javascript react node.js

답변 1

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

1) 물론 말씀하신대로 Header 컴포넌트 내에 <button> 요소를 고정시켜 두어도 상관은 없습니다. 다만 이렇게 작업할 경우 향후 동일한 위치에 <button>이 아닌 다른 요소를 넣고 싶을때 대대적인 수정이 필요하게 됩니다. 그리고 UI 요소는 이런 변화가 다른 요소에 비해 잦습니다. 따라서 확장에 유연하게 설계하기 위해 이렇게 구현하고 있습니다.

2) 좋은 질문이네요! charset "utf-8"; 은 한글 문자 등의 문자 인코딩을 명시하기 위해 사용되는 문법인데 리액트 프로젝트에는 보통 index.html 파일의 <head> 태그 안에 <meta charset="UTF-8">이 이미 포함되어 있습니다. 따라서 굳이 중복으로 정의할 필요가 없어 생략합니다.

green

작성한 질문수

전체 Q&A

질문하기