[React] 더 나은 코딩을 위한 사용자 정의 함수 (컴포넌트)생성 가이드

 

진로를 프론트엔드로 정하고 공부했었다.

그동안 프론트엔드를 공부하면서 노션에 정리해둔 개념을 블로그에 올리고자 한다

대부분 혼자 공부한 내용이라 틀린 부분이 있을수도 있다. 댓글로 알려주시면 바로 고치겠습니다!

 

 

 

컴포넌트란?

컴포넌트는 재사용 가능한 코드조각이다(UI의 함수)

엘리먼트와의 차이는 엘리먼트는 컴포넌트에 포함되어 있다

 

사용자 정의 함수=컴포넌트

둘이 같은 말이다

 

리액트를 통해 사용자 정의 함수를 만들어보자

이때 사용자 정의 함수는 대문자로 작성한다

 

 

 

 

사용자 정의 함수(컴포넌트) 만들기

함수니까 function을 사용하여 정의하자

 

 

이렇게.

 

 

그리고 이 함수를 가져다 쓸 때는

<Header></Header>

이런식으로 작성하면 된다

 

 

코드 예시

컴포넌트 정의를 하고 

function Header() {
  return (
    <div>
      <header>
        <h1><a href="/">React</a></h1>
      </header>
      </div>
  )
  
}

 

 

컴포넌트 사용할때는 이렇게 쓴다

function App() {
  return (
    <>
      <Header></Header>
      <Header></Header>
      <Header></Header>
);
}

 

좋은 컴포넌트가 갖추어야 할 것

• 고유한 자바스크립트 클래스
• 외부코드가 접근할 수 없으며 해당 클래스에서만 관리되는 DOM 구조(캡슐화 원칙)
• 구성요소에 적용되는 CSS 스타일
• 다른 구성요소와 상호작용하기 위한 이벤트, 클래스, 메서드 등을 일컫는 API

 

 

 

 

참고자료: 생활코딩 리액트 4강, 스터디 공부자료