REACT. props로 클래스명 넘기기?

개요

리액트는 컴포넌트 형식으로, 

어떻게 저렇게 하다보면 클래스명만 잘 넘기면 다크모드로 바로 변환할 수 있다

 

물론 CSS가 뒷받침 되어야겠지만 여튼

클래스명으로 props를 어떻게 넘겨야 되는지 알아보고자 한다

 

현재 파일은 About.js와 AboutCont.js로 되어있으며

About의 컴포넌트 중 일부가 AboutCont이다

 

본문

About.js를 살펴보자

이러한 컴포넌트가 있다고 하자

function About(){
    return(
        <AboutCont />
    )
}

 

컴포넌트 중 AboutCont에 light 값을 넘긴다고 해보자.

 

function About(){
    return(
        <AboutCont color="light" />
    )
}

 

AboutCont.js를 기본 구조를 살펴보면 아래와 같다

function AboutCont(){
    return (
        <section>
            ...
        </section>
    )
}

 

여기서 About에서 보낸 light 값을 받는 다면 아래와 같이 사용할 수 있다

function AboutCont(props){
    return (
        <section className={props.color}>
        </section>
        )
}

이렇게 한다면 class값으로 가져 올 수 있다

 

기존에 클래스 값이 있다면 어떻게 쓸까?

function AboutCont(props){
    return (
        <section className={`about__cont ${props.color}`}>
        </section>
        )
}

백틱(`)을 사용할 수 있다

중괄호로 우선 클래스를 묶고, props로 받는 부분은 달러 + 중괄호로 감싸주면 된다

 

결론

클래스 뿐만아니라 내용에도 넣을 수 있다

 

이게 하기 전엔 하나도 모르겠더니 

몇 번 반복하니까 이젠 좀 알겠다