[번역] Tutorial: Overview 4

Making an Interactive Component

상호작용하는 컴포넌트 만들기

 

Let’s fill the Square component with an “X” when we click it. First, change the button tag that is returned from the Square component’s render() function to this:

Square 컴포넌트에 X를 채워보자. 우리가 그것을 누를 때. 먼저, Square 컴포넌트의 render 함수로부터 반환된 버튼 태그를 바꾸자.

If you click on a Square now, you should see an alert in your browser.

이제 너가 Square를 클릭하면, 너의 브라우저에서 alert창을 볼 것이다.

 

Note

To save typing and avoid the confusing behavior of this, we will use the arrow function syntax for event handlers here and further below:

작성한 것을 저장하고 this의 혼동을 피하기 위해서, 우리는 이벤트 핸들러에 화살표 함수구문을 사용했다. 

Notice how with onClick={() => alert('click')}, we’re passing a function as the onClick prop. React will only call this function after a click. Forgetting () => and writing onClick={alert('click')} is a common mistake, and would fire the alert every time the component re-renders.

어떻게 onClick={() => alert('click')}으로 onClick prop으로 함수를 넘겨줬는지 주목하라. 리액트는 오직 클릭한 뒤에 함수만 호출한다. ()=>를 잊어먹고 onClick={alert('click')} 이렇게 쓰는 것은 흔한 실수다. 그러면 컴포넌트가 다시 렌더랑하는 매순간 alert가 발생한다.

As a next step, we want the Square component to “remember” that it got clicked, and fill it with an “X” mark. To “remember” things, components use state.

다음 단계에서, 우리는 square 컴포넌트가 클릭했던 것을 기억하기를 원한다. 그리고 X 마크로 채우기를 원한다. 기억하기 위해서 컴포넌트는 state를 사용한다.

 

React components can have state by setting this.state in their constructors. this.state should be considered as private to a React component that it’s defined in. Let’s store the current value of the Square in this.state, and change it when the Square is clicked.

리액트 컴포넌트는 state를 가질 수 있다. this.state라고 생성자 함수에 설정함으로써. this.state는 정의된 react 컴포넌트에 은폐된 것으로 간주되어야 한다. Square컴포넌트의 현재 value값을 저장해보자. this.state에. 그리고 Square를 클릭했을 때 그것을 바꿔보자.

 

First, we’ll add a constructor to the class to initialize the state:

먼저, 우리는 클래스에서 생성자를 추가하고 state를 초기화한다.

Note

In JavaScript classes, you need to always call super when defining the constructor of a subclass. All React component classes that have a constructor should start it with a super(props) call.

자바스크립트 클래스에서, 하위 클래스의 생성자를 정의할 때, super를 항상 호출할 필요가 있다. 모든 리액트 컴포넌트 클래스는 (생성자를 가지고 있는) super(props)를 호출하면서 시작해야 한다.

Now we’ll change the Square’s render method to display the current state’s value when clicked:

• Replace this.props.value with this.state.value inside the <button> tag.
• Replace the onClick={...} event handler with onClick={() => this.setState({value: 'X'})}.
• Put the className and onClick props on separate lines for better readability.

이제 우리는 square의 render 메소드를 우리가 클릭했을 때 현재 state의 값으로 보여지도록 바꾸어야 한다.

• this.props.value를 this.state.value로 버튼 태그 안에 바꿔라.
• onClick={...} 이벤트 핸들러를 onClick={() => this.setState({value: 'X'})}로 바꿔라.
• className과 onClick props를 가독성 좋게 개행해라. 

After these changes, the <button> tag that is returned by the Square’s render method looks like this:

먼저 이것들을 바꾸면, 버튼 태그는 square의 render 메소드에 의해 호출된다. 아래와 같이.

 

By calling this.setState from an onClick handler in the Square’s render method, we tell React to re-render that Square whenever its <button> is clicked. After the update, the Square’s this.state.value will be 'X', so we’ll see the X on the game board. If you click on any Square, an X should show up.

square의 render 메소드에서 onClick 핸들러로부터 this.setState를 호출하면서, 우리는 리액트에게 버튼을 클릭할 때마다 square를 리렌더링하라고 말한다. 업데이트 후에 square의 this.state.value는 X가 될 것이다. 그래서 우리는 게임판에서 X를 볼 수 있다. 만약 너가 어떤 square를 클릭한다면, X는 나타난다.

 

When you call setState in a component, React automatically updates the child components inside of it too.

너가 컴포넌트에서 setState를 호출할 때, 리액트는 자동적으로 그 컴포넌트 안에 있는 하위 컴포넌트들까지 업데이트 한다.

View the full code at this point