1. 배열 핸들링

모르는 챕터들 공부해보자

새로운 파일 생성

---

.
루트 폴더에서 npm init react-app "프로젝트 이름" 하니 원래 새로운 프로젝트 생성 가능하다.
emet설정, sass도 그대로 사용가능해서 새 컨테이너 사용하는 거보다 좋은듯 함.
velopertreact 는 https://react.vlpt.us/ 에서 배우는 리액트에 관한 프로젝트이다
.

일단 생활코딩 클래스와 다르게 CRUD를 하는 것 같아 쭉 따라가보기로 함.

.

const [inputs, setInputs] = useState({
        name:'',
        nickname:'',
    });

유저에게 받는 인풋을 한데 모아서 useState로 관리하는게 신기하다.
나였으면 useState 2개 사용할텐데 이 방법이 더 좋은듯

10. useRef 로 특정 DOM 선택하기

---

ref를 이용하여 리셋시 요소에 포커스 되도록 만들기

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

const InputSample=()=>{
    const [inputs, setInputs] = useState({
        name:'',
        nickname:'',
    });

    const {name, nickname} = inputs;

    //useRef 개체 생성, ref에 해당 개체가 들어있으면 이벤트 작동됨
    const nameInput = useRef();

    const onChange= e=>{
        const {name, value} = e.target;
        setInputs({
            ...inputs,
            [name]:value
        });
    }

    const onReset = e=>{
        setInputs({
            name:'', nickname:'',
        });
        nameInput.current.focus();
    }
    return (
        <>
            <div>
                {/*ref={nameInput}으로 name input이 nameInput 의 ref를 가지고, onReset 될 때 focus 된다.*/}
                <input placeholder='이름' name='name' onChange={onChange} value={name} ref={nameInput}/>
                <input placeholder='닉네임' name='nickname' onChange={onChange} value={nickname}/>
                <button onClick={onReset}>초기화</button>
                <div>
                    <b>값:{name} ({nickname})</b>
                </div>
            </div>
        </>
    )
}

export default InputSample;

에서

 const nameInput = useRef(); 

를 사용하면 nameInput 을 ref로 하는 DOM 요소를 조작할 수 있다.
현재는 onReset 함수안에

nameInput.current.focus();

로 값 리셋 시 ref 를 가진 요소를 포커스하게 만든다.

<input placeholder='이름' name='name' onChange={onChange} value={name} ref={nameInput}/>

이므로 name 인 input 이 포커싱됨을 확인 가능하다.
이처럼 useRef()를 사용하면 해당 DOM 요소 조작이 가능하다.
.
.

11. 배열 렌더링하기

---

const users = [
  {
    id: 1,
    username: 'velopert',
    email: 'public.velopert@gmail.com'
  },
  {
    id: 2,
    username: 'tester',
    email: 'tester@example.com'
  },
  {
    id: 3,
    username: 'liz',
    email: 'liz@example.com'
  }
];

위와 같은 배열을 랜더링 해야 할 땐 map 사용.

//UserList.js


import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

UserList.js 에 User, UserList 라는 컴포넌트 두개 생성 후에
UserList에서 map을 돌려서 User 컴포넌트 찍어내게끔 사용
둘 사이에는 prop으로 user(userlist 안에 각 user의 정보를 담은 객체).

key가 중요하다. map 에서는 user.id 를 key로 설정하면 좋음

12. useRef 로 컴포넌트 안의 변수 만들기

---

일단 배열을 App에 두고, UserList.js에 배열을 prop으로 넘기는 거로 시작
(아무래도 인풋을 App에서 핸들링하니까 이게 자연스럽다)

prop으로 users 넘겨주면 끝

UserList.js



import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

useRef는 아까 DOM handling 도 되지만 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할 수 있다.

Create에서 다음 id를 관리할 때 useRef를 사용해서 다음 아이디에 ++ 시키면 좋다.

 const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
  };

이런느낌으로 4에서 요소가 추가될 수록 id가 늘어나게끔 설정