5.3.3 컴포넌트에 메서드 생성

컴포넌트에 스크롤바를 맨 아래쪽으로 내리는 메서드를 만들것이다.

[자바스크립트로 스크롤바를 내릴 때 DOM노드에서 사용 하는 값들]

• scrollTop: 세로 스크롤바 위치(0~350)
• scrollHeight: 스크롤이 있는 박스 안의 div 높이(650)
• clientHeight: 스크롤이 있는 박스의 높이(300)

▶ ScrollBox.js

import { Component } from 'react';

class ScrollBox extends Component {

    scrollToBottom = () => {
        const {scrollHeight, clientHeight} = this.box;
        // 앞 코드에는 비구조화 할당 문법을 사용했습니다.
        // 다음 코드와 같은 의미입니다.
        // const scrollHeight = this.box.scrollHeight;
        // const clientHeight = this.box.clientHeight;
        this.box.scrollTop = scrollHeight - clientHeight;
    }
    render() {
        const style = {
            border: '1px solid black',
            height: '300px',
            width: '300px',
            overflow: 'auto',
            position: 'relative'
        };

        const innerStyle = {
            width: '100%',
            height: '650px',
            background: 'linear-gradient(white, black)'
        }

        return (
            <div
            style={style}
            ref={(ref) => {this.box=ref}}>
                <div style={innerStyle}/>
            </div>
        );
    }
}

export default ScrollBox;

• scrollToBottom 메서드의 첫 번째 줄에서는 ES6의 비구조화 할당 문법을 사용했다.
• 이렇게 만든 메서드는 부모 컴포넌트인 App 컴포넌트에서 ScrollBox에 ref를 달면 사용할 수 있다.

5.3.4 컴포넌트에 ref 달고 내부 메서드 사용

App 컴포넌트에서 ScrollBox에 ref를 달고 버튼을 만들어 누르면, ScrollBox 컴포넌트의 scrollToBottom 메서드를 실행하도록 코드를 작성한다.

▶ App.js

import { Component } from 'react';
import ScrollBox from './ScrollBox';

class App extends Component{
  render() {
    return (
      <div>
        <ScrollBox ref={(ref) => this.scrollBox=ref}/>
        <button onClick={() => this.scrollBox.scrollToBottom()}>
          맨 밑으로
        </button>
      </div>
    );
  }
}

export default App;

[주의사항]

• 문법상 onClick = {this.scrollBox.scrollToBottom} 같은 형식으로 작성해도 틀린 것은 아니다.
• 컴포넌트가 처음 렌더링될 때는 this.scrollBox 값이 undefined 이므로 this.scrollBox.scrollToBottom 값을 읽어 오는 과정에서 오류가 발생한다.
• 화살표 함수 문법을 사용하여 아예 새로운 함수를 만들고 그 내부에서 this.scrollBox.scrollToBottom 메서들르 실행하면, 버튼을 누를 때 this.scrollBox.scrollToBottom 값을 읽어 와서 실행하므로 오류가 발생하지 않는다.

버튼을 누르면 스크롤바가 맨 아래로 이동한다.

5.4 정리

• 컴포넌트 내부에서 DOM에 직접 접근해야 할 때는 ref를 사용한다.
• 다른 컴포넌트끼리 데이터를 교류할 대 ref를 사용한다면 잘못 사용된 것이다.
• 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 <-> 자식 흐름으로 교류해야 한다.
• 함수 컴포넌트에서는 useRef라는 Hook함수를 사용한다.

---

6. 컴포넌트 반복

이 장에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법을 알아보겠다.

6.1 자바스크립트 배열의 map() 함수

• 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.
• map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 결과로 새로운 배열을 생성한다.

6.1.1 문법

arr.map(callback, [thisArg])

• callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 세가지이다.
  • currentValue: 현재 처리하고 있는 요소
  • index: 현재 처리하고 잇는 요소의 index 값
  • array: 현재 처리하고 있는 원본 배열
• thisArg: callback 함수 내부에서 사용할 this 레퍼런스

6.1.2 예제

• map 함수를 사용하여 배열 [1, 2, 3, 4, 5]의 각 요소를 제곱해서 새로운 배열을 생성한다.

var numbers = [1, 2, 3, 4, 5];

var processed = numbers.map(function(num){
	return num * num;
});

console.log(processed);

이처럼 map 함수는 기존 배열로 새로운 배열을 만드는 역할을 한다.
이 코드를 ES6 문법으로 작성하면 다음과 같다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result);

var 키워드 대신 const를 사용했고, function(...){...} 대신 화살표 함수를 사용했다.

6.2 데이터 배열을 컴포넌트 배열로 변환하기

6.2.1 컴포넌트 수정하기

▶ IterationSample.js

const IterationsSample = () => {
    const names = ['눈사람', '얼음', '눈', '바람'];
    const nameList = names.map(name => <li>{name}</li>);
    return <ul>{nameList}</ul>;
}

export default IterationsSample;

▶ App.js

import { Component } from 'react';
import IterationSample from './IterationSample';

class App extends Component{
  render() {
    return (
      <IterationSample/>
    )
  }
}

export default App;