React 3일차

npx create-react-app list-app 을해서 list-app 폴더를 만들고

 

User, 와 UserList 컴포넌트를 생성.

 

UserList에 유저 정보를 5명정도 만들고 User에서 props로 받아서 UserList에 가져와 나타내면서 시작.

 

array 랜더링 시  key의 존재 유무에 따라 
업데이트, 삭제, 추가 시 효율적으로 랜더링 됨.

 

key도 넣어보기.

 

UserList 

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

const UserList = () => {

    const users = [

        {
            id: 1,
            username: 'kim',
            email : 'kim@naver.com'
        },
        {
            id: 2,
            username: 'lee',
            email : 'lee@naver.com'
        },
        {
            id: 3,
            username: 'pack',
            email : 'pack@naver.com'
        },
        {
            id: 4,
            username: 'choi',
            email : 'choi@naver.com'
        },
        {
            id: 5,
            username: 'hong',
            email : 'hong@naver.com'
        }

    ]    


    return (
        <div className='userList'>

            <h3>User List</h3>

            {
                // users.map(u => (
                //     <User user = {u} key = {u.id} />
                // ))
            }
            
            {
                users.map((u,i)=>(
                    <User user = {u} key = {i} />
                ))

            }


        </div>
    );
};

export default UserList;

 

User

import React from 'react';

const User = (props) => {

    const {username,email} =props.user; 


    return (

        <div className='user'>

        <h3> {username}({email}) </h3>

        </div>
    );
};

export default User;

 

 

---

 

useRef() / useState() 
- 비슷하게 어떤 값을 저장하는 저장공간의 역할
- 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리  
- useRef()는 값이 바뀐다고 해도 컴포넌트가 재랜더링 되지 않음.
- state : 변화 => 랜더링 => 컴포넌트 내부 변수들 초기화
- ref : 변화 => 랜더링X => 내부 변수들 값 유지
- ref는 변경시 랜더링을 발생시키지 말아야 하는 값을 다룰 때 사용,
  변화는 감지해야 하지만, 그 변화가 랜더링을 발생시키지 않아야 할 때 사용

useRef() 를 통해 관리하는 값들..
- setTimeout / setInterval 을 통해서 만들어지는 id
- 조회, 수정, 삭제 시 사용되는 id
- 외부 라이브러리를 사용하여 생성된 인스턴스

 

이름과 이메일을 입력하는 input 2개를 만들고 입력한 값이 누르면 유저리스트에 들어 갈 수 있도록 만들어보기

리스트가 들어가면 보이지는 않지만 key 값인 id의 값도1씩 증가해야함.

 

일단 CreateUser 컴포넌트를 만들고

import React from 'react';

const CreateUser = ({ username , email, onChange, onCreate}) => {
    return (
        <div className='createUser'>
            <input type="text" 
            name='username' 
            placeholder='이름' 
            onChange={onChange}
            value={username}
            />
            <input type="text" 
            name='email'
             placeholder='이메일' 
             onChange={onChange}
             value={email}
             />
            <button onClick={onCreate}>Create</button>
        </div>
    );
};

export default CreateUser;

 

username, email, onChange, onCreate를  UserList에서 받아오도록만듬.

 

UserList에서 받아와야 할것들을 만들어보도록하자.

 

기존의 UserList에

 

  const nextId = useRef(6);

    const [ users, setUser] = useState([

        {
            id: 1,
            username: 'kim',
            email : 'kim@naver.com'
        },
        {
            id: 2,
            username: 'lee',
            email : 'lee@naver.com'
        },
        {
            id: 3,
            username: 'pack',
            email : 'pack@naver.com'
        },
        {
            id: 4,
            username: 'choi',
            email : 'choi@naver.com'
        },
        {
            id: 5,
            username: 'hong',
            email : 'hong@naver.com'
        }

    ]);


    const [ inputs , setInputs] = useState({
        username : '',
        email : ''
        });


    const { username, email} = inputs

    const onChange= (e) => {
        const { name, value } = e.target;    
        setInputs({
            ...inputs, // 기존 inputs 값을 복사
            [name]:value // 현재 변경된 값을 key : value 형태로 set
        })

    }

    const onCreate = () => {
        // 값이 추가되면...
        // 나중에 여기서 구현.
        // .current : 현재값
        const user = {
            id:nextId.current,
            username : username,
            email : email
        };

        // 현재 user에 user 추가 => concat 

        setUser(users.concat(user)); 

        // 기존 inputs 창 초기화

        setInputs({
            username : '',
            email : ''
        })

        nextId.current += 1;
    }

 

유저의 정보를 담고있는 users의 배열을 유저를 추가할 때 변화하면서 추가할 수 있도록 useState() 안에 넣어준다.

그리고 name,email을 inputs에 담고, onChage에서 e.target을  name, value로 구조 분할해준다.

이후 구조 분할한 name, value값을 setInputs에서  [name] : value 로 name 키값에 value를 넣어줄 수 있도록한다.

이 때, 변경대상이 아닌 값이 공백처리되니 ...inputs를 통해 기존값을 복사해줘야함.

 

그리고 onCreate()에 버튼을 누르면 추가할 수 있게  추가될 유저 객체를 만들어주고 concat을 통해 users뒤에 붙혀준 후, id값을 1증가시키는 구조이다.

 

이제 UserList return 안에 CreateUser를 가져와주면

 

    return (
        <div className='userList'>

            <CreateUser username = {username} email = {email} onChange={onChange} onCreate={onCreate}/>

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

 

결과

 

이렇게 입력하고 버튼을 누르면 추가되는 것을 볼 수 있음.

 

---

 

UserList 각 유저항목에 X버튼을 만들어서 누르면 지워지도록 해보기

 

filter : 배열의 항목을 제거하기 위해서 사용
filter는 조건에 맞는 값만 배열로 리턴

 

import React from 'react';

const User = ( {user, onRemove } ) => {

    return (

        <div className='user'>

        <h3> 
            {user.username}({user.email}) 
            <button onClick={() => onRemove(user.id)}>X</button>
        </h3>

        </div>
    );
};

export default User;

 

이런 식으로 h3태그안에  버튼을 넣고 클릭했을때 기능을하는 onRemove를 만듬

onRemove () 안에 id값을 그냥 넣을 수 없으니 () => 로 값을 넣을 수 있도록해줌.

 

    const onRemove = (id) => {
        setUsers(users.filter(user => user.id !== id))
    
   	}
    
     return (
        <div className='userList'>

            <CreateUser username = {username} email = {email} onChange={onChange} onCreate={onCreate}/>

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

 

onRemove를 만들어서 내가 누른 항목에 id를 전달받아 

user.id가 일치하지 않는 원소만 추출하여 새로운 배열로 리턴하게 만듬.

 

UserList  map 안에 onRemove를 User에 전달할 수 있도록 해줌.

 

결과

 

x버튼을 눌렀을때 없어지는 것을 확인 할 수 있음.

 

---

 

UserList 의 유저정보에다가 active : true / false 를 입력하고,

클릭할 때 마다 active를 반전시켜 색이 바뀌고, 돌아오도록 해보기

 

User 컴포넌트에  유저이름에다가 active가 ture일때 색이 올 수 있도록 스타일을 넣어두고,

클릭했을때 유저정보에서 id를 받아서 작동 할 수 있는 onToggle을 넣어둠.

    <span style={{
            color: user.active ? "green" : "black",
            cursor:"pointer"
            }} 
            onClick={() => onToggle(user.id)}>
                {user.username} </span> 
           <span>({user.email})</span>

 

    const onToggle = (id) => {
        // user.id 가 파라미터 id와 일치하면 active의 상태를 반전시켜 줌.
        setUsers(users.map(user =>  user.id === id ? { ...user, active : !user.active }  : user ))
    }

 

{
 users.map(u => (
     <User user = {u} key = {u.id} onRemove={onRemove} onToggle={onToggle}/>
      ))
}

 

onToggle  스프레드 연산자로 그대로 user정보를 가져오고,  active값에 !active로  active값만 반전시켜 만들어줌

삼항연산자를 이용해서  user.id 와 파라미터id 가 일치하지않으면 그대로 user반환.

 

결과

 

 

누르면 초록색으로 변화, 다시누르면 검정색으로 돌아오는 것을 볼 수 있음.