#3 컴포넌트에 변수, 함수와 스타일 삽입하기

별거 없어요. { } 안에 변수 넣어주면 그만입니다.

함수의 경우 () 없이 function 이름만 넣어주셔야 해요.

import classNames from "classnames";

const Button = () => {
    const name = "Hello"
    const sayHello = () => {
        console.log("Hello")
    }
    return (
        <button className={classNames('button', 'primary')} onClick={sayHello}>
            "{name}"라고 말해
        </button>
    )
}

export default Button;

 

만약 onClick={sayHello()} 으로 삽입하시면 페이지 렌더될 때 자동 실행되어, 미클릭 상태인데도 불구하고 실행되었음을 콘솔에서 확인할 수 있습니다. 

 

그렇담 파라미터를 넣고 싶을 때에는 어떻게 할까, 간단합니다. 콜백함수로 넣으세요!

import classNames from "classnames";

const Button = () => {
    const name = "Hello"
    const sayHello = (name) => {
        console.log("Hello, " + name)
    }
    return (
        <button className={classNames('button', 'primary')} onClick={()=>{sayHello('Mint')}}>
            "{name}"라고 말해
        </button>
    )
}

export default Button;

---

마지막 스타일 삽입입니다.

리액트에서 스타일은 오브젝트로 들어갑니다.

일부 속성은 아래와 같이 카멜 방식으로 변경되어야 하는데요.

"-"으로 연결되어 있는 부분이 거의 카멜로 변경되었다고 생각하시면 될 것 같은데, 궁금하신 분은 이곳을 클릭해 주세요!

이상한 사이트 아닙니다, 리액트 사이트입니다.

const Button = () => {
    return (
        <button style={{fontSize: '13px', color: 'red'}} >
            Button
        </button>
    )
}

export default Button;

잘 따라오고 계시죠?

갈 길이 먼데 과연 제가 다 깔끔히 정리할 수 있을지 모르겠습니다. 뷰도 해야 하는데...