React (32) 리액트 훅 - 함수형 컴포넌트 기본구조

Updated 09/14/21

처음에 리액트를 클래스형 컴포넌트 위주로만 배웠기 때문에 프로젝트를 하면서 나중에 리액트 훅을 쓰면서 함수형 컴포넌트를 알게 되었다. mini size 함수만 사용해봤던 나에게 컴포넌트화된 거대 함수(?)의 존재는 쉽게 와닿지 않았다. (마치 개미더러 지구를 보라면 너무 커서 보이지 않듯...)  하지만 여러 프로젝트를 경험해보며 이해의 폭이 생긴 것 같아 다시 정리해본다.

---

React (32) 리액트 훅 - 함수형 컴포넌트 기본구조

 

함수형 컴포넌트

export default function Hello () {
  함수 안에 컴포넌트 내용이 몽땅 들어가 있어
  어디서든 이 함수덩어리만 호출하면 달려가 사용할 수 있다.
  훨씬 짧고 직관적인 코드를 짤 수 있다.
  React Hook 을 통해 라이프 사이클 메소드를 사용할 수 있다.
} 

  

함수형 컴포넌트는 안에 함수들이 선언되고 return 값으로 조각난 HTML을 출력하는 방식이다.

이런 컴포넌트들이 여러개 모이면 조각난 HTML 들이 합쳐지면서 하나의 페이지를 구성하게 된다.

 

** 꼭 기억해야할 것은 맨앞에 export default 를 선언해주어야 다른 파일에서도 import 가 가능하다는 것이다.

export default function Hello() {

  function showName() { 	// 콘솔창에 Mike 가 출력된다.
    console.log("Mike")
  }
  function showAge(age) {	// 콘솔창에 입력받은 age가 출력된다.
    console.log(age);
  }
  function showText(e) { 	// 인풋창에 입력받은 이벤트 객체를 
    console.log(e.target.value);// 콘솔창에 value로 받아 출력한다.
  }

  return (			// 이 리턴문 안에서 HTML이 결과값으로 출력된다.
    <div>
      <h1>Hello</h1>
      <div>
        <button onClick={showName}>Show name</button> // 클릭하면 showName() 실행 
        <button onClick={showAge}>Show age</button>   // 클릭하면 showAge() 실행
      </div>
      <input type="text" onChange={showText} />	      // 인풋창에 입력시 showText() 실행
    </div>
  );
}

 

실행화면

버튼을 클릭하거나 입력하면 이벤트메소드가 실행된다.

 

 

---

MORE DETAILS 

여기서부터는 더 디테일한 설명을 정리한 섹션이다. 

 

 

1. 세가지 함수를 정의했다. showName(), showAge(), showText() 라는 함수이다.

이들의 역할은 해당 함수가 들어있는 이벤트가 호출이 되면 함수가 실행되며 이벤트가 발생한다.

아 ~ 주 간단한 함수이다. 해당함수들을 실행하면 콘솔창에 각자의 내용이 출력이 된다.

 

function showName() { 	// 콘솔창에 Mike 가 출력된다.
    console.log("Mike")
  }
  function showAge(age) {	// 콘솔창에 입력받은 age가 출력된다.
    console.log(age);
  }
  function showText(e) { 	// 인풋창에 입력받은 이벤트 객체를 
    console.log(e.target.value);// 콘솔창에 value로 받아 출력한다.
  }

 

2. 리턴문에서는 HTML 코드가 출력이 되는데 바로 이 <button>과 <input>태그에서 이벤트가 발생이 된다.

버튼을 누르면 onClick 이벤트를 통해 {showName} 이라는 함수를 호출한다.  onClick() 다음에는 위에서 선언한 함수를 넣어주면 된다.

입력창에 입력을 하면 onChange 이벤트를 통해 {showText} 라는 함수가 실행된다. onChange 이벤트는 입력창에 내용이 업데이트 되면 바로 감지하는 이벤트이다. 주로 유저가 무언가를 입력했을 때 사용을 많이 한다.

 

<div>
  <button onClick={showName}>Show name</button> // 클릭하면 showName() 실행 
  <button onClick={showAge}>Show age</button>   // 클릭하면 showAge() 실행
</div>
<input type="text" onChange={showText} />	// 인풋창에 입력시 showText() 실행