[React] 컴포넌트 알아보기

 

 

 

 

 

✍ 비구조화 할당

 

const { name, favoriteNumber, children } = this.props; // 비구조화 할당
const { number, fixedNumber } = this.state;            // 비구조화 할당

 

this.props 가 가진 name, favoriteNumber, children 값을 { name, favoriteNumber, children } 에 넣어준다.

 

 

 

✍ constructor 없이 state 초깃값 지정하기

 

class Counter extends Component {
	state = {
    	number: 0,
        fixedNumber: 0
    }
    render(){
    	const {number, fixedNumber} = this.state;
        return ( ... );
    }
}

 

 

 

 

✍ this.setState 에 객체 대신 함수 인자 전달하기

 

onClick={() => {
	this.setState({ number: number + 1 });
    this.setState({ number: this.state.number + 1 });
}}

 

이 경우 클릭을 했을 때 숫자가 증가하는 이벤트가 두 번 발생할 것 같지만, 실제로는 숫자가 한 번만 증가한다. this.setState 를 사용한다고 해서 바로 state 값이 바뀌지는 않기 때문이다. 이에 대한 해결책이 this.setState 를 사용할 때 객체 대신 함수를 인자로 넣어주는 것이다.

 

 

 

<button onClick={() => {
	this.setState(prevState => {
    	return{
        	number: prevState.number + 1
        }
    });
    // 위 코드와 아래 코드는 같은 기능을 한다.
    // 차이점은 아래 코드는 함수에서 바로 객체를 반환한다는 의미이다.
    this.setState(prevState => ({
    	number: prevState.number + 1
    }));
}}></button>

 

여기서 prevState 는 기존 상태이고, props는 현재 지니고 있는 props 를 가리킨다.

 

 

 

 

✍ useState 알아보기

 

const [message, setMessage] = useState('');

 

useState 함수의 인자에는 상태의 초깃값을 넣어 주는데, 반드시 객체일 필요는 없다. 문자열, 숫자, 객체, 배열 등 값의 형태는 자유이다. 함수를 호출하면 배열이 반환되는데 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어주는 함수이다. 이를 Setter 함수라고 한다. 배열 비구조화 할당을 통해 이름을 자유롭게 설정해 줄 수 있다.

 

 

import {useState} from 'react';

const Counter = () => {
	const [value, setValue] = useState(0);
    
    return(
    	<div>
        	<p>
            현재 카운터 값은 <b>{value}</b>입니다.
            </p>
            <button onClick={()=>setValue(value+1)}>더하기</button>
            <button onClick={()=>setValue(value-1)}>빼기</button>
        </div>
    )
}

export default Counter

 

✍ ref 알아보기

 

ReactDOM.render(<App />, document.getElementById('root'));

 

import React, { 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;

 

import { Component } from "react";

class ScrollBox extends Component {
  scrollToBottom = () => {
    const { scrollHeight, clientHeight } = this.box;
    this.box.scrollTop = scrollHeight - clientHeight;
    console.log(this.box, scrollHeight, clientHeight, this.box.scrollTop);
  };

  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;

 

특정 DOM 에 작업을 해야 할 때, DOM 을 직접적으로 건드려야 할 때 ref 를 사용한다. ref 는 리액트 내에서 id 와 같은 역할을 한다. 즉, 위의 return() 내에 있는 <div> 요소는 앞으로 this.box 를 통해 접근이 가능해진다. 이름은 this.box 말고 this.bigBox 라든가 this.cup 이라든가 다르게 할 수 있다.

 

 

콜백 함수를 통한 ref 설정

ref 를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref 를 달고자 하는 요소에 ref 라는 콜백 함수를 props 로 전달해주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달 받는다.

 

<input ref={(ref) => (this.input=ref)}/>

 

여기서 this.input 은 input 요소의 DOM 을 가리킨다.

 

 

 

 

 

✍ key 알아보기

 

key 는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다. key 가 없을 때는 리스트를 순차적으로 비교하면서 변화를 감지하지만 key 가 있으면 이 값을 사용해서 어떤 변화가 일어났는지 빠르게 알아낼 수 있다.

 

import React from "react";

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

export default IteraationSample;

 

map 함수에 전달되는 콜백 함수 인수인 index 값을 사용하면 된다. 고유한 값이 없을 때만 index 를 key 로 사용해야 한다. index 를 key 로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못한다.

 

 

 

 

 

 

✍ 데이터 추가/삭제 구현하기

 

import { useState } from "react";

const IteraationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: "눈사람" },
    { id: 2, text: "얼음" },
    { id: 3, text: "눈" },
    { id: 4, text: "바람" },
  ]);
  const [inputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(5); // 추가할 데이터의 인덱스가 5부터 시작

  const onChange = (e) => {
    setInputText(e.target.value);
    console.log(e.target.value);
  };
  
  // 데이터 추가하기 : 배열 내장 함수 concat 사용
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId, // 다음번 인덱스에 추가해주기
      text: inputText, // 입력한 내용을 추가하는 것이니 text로 inputText 지정
    });
    setNextId(nextId + 1); // 다음 인덱스를 위해 1 올리기
    console.log(nextId + 1);
    setNames(nextNames); // 리스트에 이번에 추가하 내용 추가
    console.log(nextNames);
    setInputText(""); // inputText 비우기
  };

// 데이터 삭제하기 : 배열 내장 함수 filter 사용
  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id !== id);
    setNames(nextNames);
  };

// 데이터 보여주기 & 더블클릭 시 삭제
  const namesList = names.map((name) => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));
  
  return (
    <>
      <input value={inputText} onChange={onChange} />
      {/* 버튼 클릭 시 추가 */}
      <button onClick={onClick}>추가</button>
      <ul>{namesList}</ul>
    </>
  );
};
export default IteraationSample;

 

 

 

 

웹 실행 화면

 

 

 

 

 

 

 

 

도서 [리액트를 다루는 기술] 을 참고하여 작성한 글입니다.