React 컴포넌트 생성 관련

[polycompo]

Question에 대해 상세 내용을 적어주세요
React에서 컴포넌트 생성시에 두가지 방법이 있습니다.

먼저 공통으로 인지하고 갈 것이 있습니다.
파일에서 JSX를 사용하려면 반드시 React를 import 해줘야 합니다.
그리고 return 은 모두 JSX 를 해야합니다.
여기서 주의 할 것이 있는데 tag는 꼭 닫혀 있어야 합니다.

render() {
 <div>
  <input type="text">
 </div>
} // Error!

이렇게 닫혀있지 않는 경우는 error가 발생합니다.
반드시 아래와 같이 닫아주어야 합니다.

render() {
 <div>
  <input type="text"/>
 </div>
} // OK!

---

JSX 에서 모든 코드는 하나의 element로 감싸야만 합니다.

render() {
 <div>
  <input type="text"/>
 </div>
 <div>
 </div>
} // Error!

이 코드에서는 동일 뎁스의 div가 하나의 element로 감싸져 있지 않기 때문에 에러가 발생합니다.
아래와 같이 하나의 element로 감싸야 합니다.

render() {
 <div>
  <div>
   <input type="text"/>
  </div>
  <div>
  </div>
 </div>
} // OK!

---

첫번째 방식은 class를 이용한 방법입니다.
아래와 같습니다.

import React from 'react';

class TestComponent extends React.Component {
 render() {
  return (
   <div>
    {/* HTML 코드 입력 */}
   </div>
  );
 }
}

export default TestComponent;

class 방식으로 생성할 경우 반드시 render() 함수를 정의 해야합니다.

---

두번째 방법은 함수형을 이용한 방법입니다.
아래와 같습니다.

import React from 'react';

const TestComponent = () => {
  return (
   <div>
     {/* HTML 코드 입력 */}
   </div>
  );
}

export default TestComponent;

함수형 방식으로 생성할 경우 render() 함수를 정의할 필요가 없습니다.

원하는 적용 방안을 설명해주세요.
두 방식 중 한가지 방식을 선택해서 적용한다면 전체적으로 코드가 깔끔해 질 것입니다.

이와 관련된 이슈가 있습니까?
x

적용될때 어떠한 부수효과가 발생할 수 있습니까?
x

[seongbin9786]

👍