React 컴포넌트에서 동적으로 리스트 아이템 추가하기

제목: React – 컴포넌트 내에서 목록 항목 동적 생성

이 튜토리얼에서는 React 컴포넌트 내에서 비정렬 목록(ul)에 목록 항목을 동적으로 추가하는 방법을 알아보겠습니다. 사용자가 버튼을 클릭하여 새로운 목록 항목을 추가할 수 있는 간단한 React 애플리케이션을 만들 것입니다.

React의 가상 DOM 이해하기

React는 가상 DOM과 함께 작동하며, 이는 렌더링된 UI의 내부 표현입니다. 이를 통해 React는 실제 DOM을 효율적으로 업데이트하고 조작할 수 있으며, 직접적인 DOM 조작의 필요성을 최소화합니다.

다른 라이브러리인 jQuery와 달리 React를 사용할 때는 DOM 요소를 직접 조작하지 않습니다. 대신, JSX 마크업을 렌더링하는 컴포넌트를 생성합니다.

목록 컴포넌트 생성

먼저, 단일 목록 항목을 나타내는 “ListItem”이라는 함수형 컴포넌트를 생성해 보겠습니다:

const ListItem = ({ value, onClick }) => (
  <li onClick={onClick}>{value}</li>
);

다음으로, 렌더링할 비정렬 목록을 나타내고 항목 배열을 반복하여 목록 항목을 렌더링하는 “List”라는 컴포넌트를 생성하겠습니다:

const List = ({ items, onItemClick }) => (
  <ul>
    {
      items.map((item, i) => <ListItem key={i} value={item} onClick={onItemClick} />)
    }
  </ul>
);

추가 기능 구현하기

메인 컴포넌트인 “App”에서 입력값과 과일 배열의 상태를 관리할 것입니다. 사용자가 “추가” 버튼을 클릭하면 입력값을 과일 배열에 추가할 것입니다:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      fruits: ['사과', '바나나', '오렌지']
    };
  }

  onClick = () => {
    const { inputValue, fruits } = this.state;
    if (inputValue) {
      const nextState = [...fruits, inputValue];
      this.setState({ fruits: nextState, inputValue: '' });
    }
  }

  onChange = (e) => this.setState({ inputValue: e.target.value });

  handleItemClick = (e) => { console.log(e.target.innerHTML) }

  render() {
    const { fruits, inputValue } = this.state;
    return (
      <div>
        <input type="text" value={inputValue} onChange={this.onChange} />
        <button onClick={this.onClick}>추가</button>
        <List items={fruits} onItemClick={this.handleItemClick} />
      </div>
    );
  }
}

컴포넌트 렌더링하기

마지막으로, “App” 컴포넌트를 루트 요소에 렌더링해야 합니다:

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

결론

이 튜토리얼에서는 목록 항목을 React 컴포넌트에 추가하여 동적 목록을 생성하는 방법을 알아보았습니다. React의 가상 DOM을 활용하면 실제 DOM을 직접 조작하지 않고 UI를 효율적으로 업데이트하고 조작할 수 있습니다. 이 접근 방식은 React 애플리케이션의 성능과 유지 보수성을 향상시키는 데 도움이 됩니다.

이 튜토리얼에서 설명한 단계를 따라가면 React 컴포넌트에 동적 목록 항목을 쉽게 추가할 수 있으며, 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

즐거운 코딩 되세요!

참고 자료 : 

reactjs