Skip to main content

Element 찍어내기

· 3 min read
const paint = () => (
    <>
        <h1>Hi</h1>
        <h3>Bye</h3>
    </>
)
  • 지난 시간에 만들어 변수로 할당했던 내용을 paint 라는 함수로 변경

함수를 호출하여 element 변수에 할당

const element = (
    <>
        {paint()}
        {paint()}
        {paint()}
    </>
)
  • element라는 변수에 paint함수를 3번 호출하는 react 요소를 만들어 할당

선언된 element를 rootElement에 render

ReactDOM.render(element, rootElemet)

parameter를 갖는 함수로 변경

const paint = (title, description) => (
    <>
        <h1>{title}</h1>
        <h3>{description}</h3>
    </>
)

const element = (
    <>
        {paint("Name", "Davidyoon")}
        {paint("Age", "34")}
        {paint("Country", "Korea")}
    </>
)
  • Custom Element를 커스텀하게 만들어 함수화 하여 필요한 곳에서 다양하게 활용할 수 있다

Custom Element 만들기

const Paint = ({title, description}) => (
    <>
        <h1>{title}</h1>
        <h3>{description}</h3>
    </>
)

const element = (
    <>
        <Paint title="Hello" description="hello" />
    </>
)
  • 함수형 Custom Element를 생성할때는 대문자 이름을 기본으로 한다
    • 소문자로 시작할 시 Warning 과 함께 정상적인 출력이 되지 않음
  • param값을 넣어주는 곳에는 props로 {} 안에 포함되어야 한다
  • HTML 태그 처럼 내부 요소처럼 파라미터를 작성해 주면 된다

Children 넣어보기

const Paint = ({title, description, children}) => (
    <>
        <h1>{title}</h1>
        <h3>{description}</h3>
        {children}
    </>
)

const element = (
    <>
        <Paint title="Hello!" description="it's me">
            <span>Davidyoon</span>
        </Paint>
    </>
)

  • Custom Element에는 children을 넣을 수 있다
  • Paint 컴포넌트에 span 태그 안에 커스텀한 children을 넣어서 사용 가능하다

정리

  • Function 은 재사용이 가능한 Element 즉, Custom Element를 만드는데 사용된다
  • Custom Element를 만들 때에는 기존 html tag와 구분하여 대문자로 만들어야 한다(필수)
  • Children은 당연히 개수에 제한이 없다

참조​

  • 패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)