(React) 리액트: 초간단 리스트 작성 기능 구현하기(간단함)/이벤트 핸들링 및 useRef, useState 사용

---

(React) 리액트: 리스트 작성 프로젝트 만들기(간단함)

---

 

*이 포스팅은 개인적으로 리액트를 복습하기 위해 작성한 포스팅입니다. 

 

포스팅 요약

1. 기능설명 및 실행 화면 

2. 이벤트 핸들링에 대한 간단 설명

3. useRef에 대한 간단 설명

4. useState에 대한 간단 설명

5. 간단한 리스트 작성 기능 구현하기 (css X)

 

---

1. 기능설명 및 실행 화면 

기능:

1. 입력: input태그에 문자 입력 후, 확인버튼 클릭 or 엔터 시, 입력된 문자 출력

2. 삭제: 삭제를 원하는 요소 더블클릭시 삭제

3. 수정: input태그에 문자 입력 후, 대체하고 싶은 요소 클릭시, 수정됨.

<사진>

<실행 영상>

---

2. 이벤트 핸들링에 대한 간단 설명

리액트에는 HTML과 같은 이벤트들이 있습니다. ex) onClick, onmouseover... 등

다른점은 리액트에서는 카멜 표기법을 따라야 된다는 점입니다.

HTML	React
onclick, onmouseover, onchange ...	onClick, onMouseOver, onChange ...

 

---

3. useRef에 대한 간단 설명

ref는 원하는 요소에 직접 접근할 수 있게 해줍니다.

예를들어 

<input ref={inputName} />

input요소에 "inputName"으로 ref를 달아 주면, 다른 요소에서도 inputName으로 input에 접근할 수 있게됩니다.

(* 아래 프로젝트에서 사용한걸 보시면 이해가 가실겁니다.

* inputName말고 다른 이름을 써도 됩니다.)

*아래코드는 이해를 돕기위해 프로젝트에서 useRef를 쓴 부분만 따온겁니다.

const inputName = useRef(null); //초기화

const modify = (id) => {
    lists.map((list) => {
      if (list.id === id) {
      //input태그에 직접 접근하여 커서 포커스 설정
        inputName.current.focus(); 
        
      //input태그에 직접 접근하여 input의 value값 가져오기
        list.text = inputName.current.value;
      }
    });
    setLists(lists);
    setInput('');
  };
  
  <input
          name="list"
          type="text"
          placeholder="추가할 문장을 써주세요."
          value={input}
          onChange={onChange}
          ref={inputName} //inputName이라는 이름으로 ref를 달아줌
        />

---

4. useState에 대한 간단 설명

useState는 상태를 바꿀때 사용합니다. 

*간단한 예제

import React, { useState } from 'react';
//useState import해오기

const UseState = () => {
  //처음 Input의 값을 ''으로 초기화
  const [text, setText] = useState('');
	  
  //onChange는 input에 값이 업데이트 될 시 실행되는 이벤트
  
  const onChange = (e) => {
  	//input에 글씨를 칠 때마다, text에 value값을 넣어줌
    setInput(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={onChange} value={text} />
    </div>
  );
};

export default UseState;

 

---

5. 간단한 리스트 작성 기능 구현하기 (css X)

 

App.js

import React from 'react';
import ListComponent from './ListComponent';

const App = () => {
  return <ListComponent />;
};

export default App;

 

ListComponent.js

import React, { useState, useRef } from 'react';

const ListComponent = () => {
  /* userState사용전 초기화 */
  const [input, setInput] = useState('');
  const [lists, setLists] = useState([]);
  const [nextId, setNextId] = useState(0);
  const inputName = useRef(null);

  /* 이벤트들 */

  /* input값에 문자 입력할 때 마다 실행 되는 이벤트 함수*/
  const onChange = (e) => {
    setInput(e.target.value);
  };

  /* enter or 확인 버튼 클릭 시 발생하는 이벤트 함수*/
  const submit = (e) => {
    e.preventDefault();  //새로고침 방지
    const about_lists = lists.concat({ //원래 있는 리스트에 붙여주기
      id: nextId,
      text: input,
    });
    setNextId(nextId + 1); //id값 +1

    /*방금 붙여준 리스트까지 포함 된 리스트로 세팅하기*/
    setLists(about_lists); 
    setInput(''); //input 태그안에 있는 문자 지워주기
  };

  /* 리스트들 화면에 띄우기 위해 map으로 반복 요소 불러오기 */
  const input_list = lists.map((list) => (
    <li
      /*고유 key값 주기*/
      key={list.id} 
      /*더블클릭시 삭제할 이벤트*/
      onDoubleClick={() => removeList(list.id)} 
      /*클릭시 요소가 수정되는 이벤트*/
      onClick={() => modify(list.id)}
    >
      {list.text}
    </li>
  ));
  
  //삭제 이벤트 함수
  const removeList = (id) => {
    const about_lists = lists.filter((list) => list.id !== id);
    setLists(about_lists);
  };

  //수정 이벤트 함수
  const modify = (id) => {
    lists.map((list) => {
      if (list.id === id) {
        inputName.current.focus();
        list.text = inputName.current.value;
      }
    });
    setLists(lists);
    setInput('');
  };

  return (
    <div>
      <form onSubmit={submit}>
        <input
          name="list"
          type="text"
          placeholder="추가할 문장을 써주세요."
          value={input}
          onChange={onChange}
          ref={inputName}
        />
        <button type="submit">확인</button>
      </form>
      <hr />
      <ul>{input_list}</ul>
    </div>
  );
};

export default ListComponent;

---

역시 직접 기능 구현을 해봐야지 어떻게 쓰이는지 알 것 같네요 ㅠㅠ