3일차 리액트 기초(06~07장) - 생활코딩! React 리액트 프로그래밍

06 이벤트

07 state

 

이벤트 챕터는 onClick 같은 태그 이벤트들의 핸들러를 어떻게 등록할지에 대한 내용이다. 이벤트를 명시하는 건 컴포넌트에서 하고, 핸들러는 prop으로 전달하는 형태를 설명하고 있다. 앞선 포스트에서 기술했듯이 prop에는 모든 자료형이 가능하기 때문에 함수형 역시 가능하시겠다.

 

state는 컴포넌트 내에서 변수 값이 계속 유지되도록 하는 기능이다. 예를 들어

fruit = 'apple';

이라고 그냥 대입만 하면 컴포넌트 함수가 끝날 때 fruit의 값은 사라진다. 하지만, state를 이용하면 함수가 끝나도 fruit는 계속 'apple'로 남을 수 있다.

이처럼 state는 컴포넌트를 OOP의 객체처럼 인스턴스화 할 수 있도록 해주는 기능이다. 객체는 속성(멤버 변수)과 메소드(멤버 함수)로 이루어져 있는데, 인스턴스라는 것은 바로 속성을 인스턴스별로 고유하게 가지고 있는 형태를 뜻한다. state를 이용하면 컴포넌트 역시 로컬 변수들을 속성처럼 이용할 수 있게 된다. 즉, state는 리액트가 OOP 패턴을 차용하기 위해 존재함을 부정할 필요는 없다.

 

실습은 이벤트와 state를 한 번에 사용해 보았다.

function Header(props) {
  const handler = props.onClickHandler ? props.onClickHandler : ()=>{alert('A handler should be injected.')};
  return (
    <header className="header">
      <nav>
        <ul className="nav-list">
          <li>Home</li>
          <li>Projects</li>
          <li>About</li>
          <li>Contact</li>
          <li><a onClick={handler}>{props.Other}</a></li>
        </ul>
      </nav>
    </header>
  );  
}
 
function App() {
  const [isClicked, setIsClicked] = useState(false);
  const handler = ()=>{alert(`I'm a handler. more clicked: ${isClicked}`); setIsClicked(true);};
 
  return (
    <Header Other='Custom' onClickHandler={handler} />
  );
}

 

state 변수를 이용하는 함수를 이벤트 핸들러로 만들어 컴포넌트에 주입(injection)하는 형태로 간단히 구현해 보았다.

 

※ 6장의 내용 중 <a> 태그가 링크를 타고 가지 않도록 하기 위해 'event.preventDefault()' 함수를 호출했는데 나는 그냥 href 속성을 빼는 것으로 비슷하게 해결했다.