[React] 화살표 함수(Arrow Function) 만들기

리액트(React)에서 함수를 만드는 방법은 두 가지가 있습니다.

 

 

화살표 함수(Arrow function)

---

const FunctionName = () => (Action);

const Title = () => (                                 
    <h3 id="title" style={{color: "pink"}} onMouseEnter={() => console.log("mouse enter")}>
        Hello world
    </h3>
);

함수의 타입(type), 함수의 이름, = () => 그리고 함수의 액션(action) 파트로 나뉩니다.

함수의 액션 파트에는 HTML의 유효한 tag를 사용할 수 있습니다.

 

 

 

 

기본 함수(Normal function)

---

function Button() {                                 
    return (
    <button 
        style={{backgroundColor: "yellow"}} onClick={() => console.log("im clicked")}>
            Click me!
        </button>
    );
}

function, 함수의 이름, () {Action_part}로 이루어 집니다.

함수의 액션 파트에는 return(); 안에 함수가 실행되면 동작할 내용이 들어가게 됩니다. 

화살표 함수와 같이 HTML의 유효한 태그를 사용하면 됩니다.

 

 

 

 

함수를 사용하고 싶을 땐 아래와 같이 사용하시면 됩니다.

const Container = <div><Title/> <Button/></div>

만들어준 함수의 이름을 HTML의 일반적인 태그인 것처럼 사용하시면 됩니다.

 

⚠️ 주의할 점 ⚠️

함수의 첫 문자는 대문자여야 됩니다.

아니면 웹 브라우저에서 HTML의 tag인지 사용자 함수 tag인지 헷갈릴 수 있습니다.

Ex)  <Function/>

 

 

마지막으로 render을 시켜줘야 웹 브라우져에 나타나겠죠 ?

ReactDOM.render(Container, root);

 

 

 

◡̈