React - array rendering, 컴포넌트 안에 컴포넌트 넣기, 변수로 props받기, useRef

김가오리·2022년 11월 3일

컴포넌트 안에 컴포넌트를 넣어보자..

App.jsx

import React, {useState} from 'react';
import './App.css';
import UserList from './UserList';

function App() {

  return (
    <>
      <UserList />
    </>
  );
}

export default App;

UserList.jsx

import React from 'react'

    const Item = ({user}) => {
        return (
            <div>
                <b>{user.username}</b><span>({user.email})</span>
            </div>
        )
    }

    const UserList = () => {
    const users = [
        {
            id:1,
            username : "jisung",
            email : "jisung@gmail.com"
        },
        {
            id:2,
            username : "mark",
            email : "marklee@naver.com"
        },
        {
            id:3,
            username : "jungwoo",
            email : "jungwoo@gmail.com"
        }
    ]
    return (
        <>
            <Item user = {users[0]}></Item>
            <Item user = {users[1]}></Item>
            <Item user = {users[2]}></Item>
        </>
    )
}

export default UserList

const Item = ({user}) => {}//(props)로 받지 않고 {}를 사용하여 변수 그대로 데이터를 받음

UserList.jsx 약간의 변형

import React from 'react'

    const Item = (props) => {
        return (
            <div>
                <b>{props.user.username}</b><span>({props.user.email})</span>
            </div>
        )
    }

    const UserList = () => {
    const users = [
        {
            id:1,
            username : "jisung",
            email : "jisung@gmail.com"
        },
        {
            id:2,
            username : "mark",
            email : "marklee@naver.com"
        },
        {
            id:3,
            username : "jungwoo",
            email : "jungwoo@gmail.com"
        }
    ]
    return (
        <>
            {users.map((user) => <Item user = {user} key = {user.id}/>)}
        </>
    )
}

export default UserList

const Item = (props) => {} // 평소처럼 props로 받음.

key = {user.id} // key값이 없으면 경고창이 뜸.

배열 렌더링시 key를 전달해주어야 효율적으로 렌더링 할 수 있음

UserList에 새로운 user를 추가

App.jsx

import React, {useRef, useState} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

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

  const {username, email} = inputs;

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

  
  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com' 
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com' 
    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com' 
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {

      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

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

    }
  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} />
    </>
  );
}

export default App;

UserList.jsx

import React from 'react'

const Item = ({user}) => {
    return(
        <>
            <div>
                {user.username} : {user.email}
            </div>
        </>
    )
}

const UserList = ({users}) => {

  return (
    <>
        {users.map((user) => <Item user = {user} key = {user.id}/>)}
    </>
  )
}

export default UserList

CreateUser.jsx

import React from 'react'

const CreateUser = ({username, email, onCreate, onChange}) => {
  return (
    <>
        <input 
        name = "username"
        onChange = {onChange}
        placeholder = '계정명'
        value = {username}
        />
        <input 
        name = "email"  
        onChange = {onChange}
        placeholder = '이메일'
        value = {email}
        />
        <button onClick = {onCreate}>등록</button>
    </>
  )
}

export default CreateUser

useRef

DOM을 선택하는 용도 외에, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리.
useRef로 관리하는 변수 값이 바뀌어도, 컴포넌트가 리렌더링 되지 않음.
배열에 새 항목을 추가할때, 새 항목에서 사용 할 고유 id를 관리 할 수 있음.

 const nextId = useRef(4); 
 //useRef()에 파라미터를 넣어주면, 이 값이 .current의 값의 기본값.

값을 수정 : .current값을 수정.
값을 조회 : .current값을 조회.

UserList의 리스트를 삭제

App.jsx

import React, {useRef, useState} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

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

  const {username, email} = inputs;

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

  
  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com' 
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com' 
    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com' 
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {
      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

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

    const onRemove = (id) => {
      setUsers(users.filter(user => user.id !==id));

    }
  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} onRemove={onRemove}/>
    </>
  );
}

export default App;

UserList.jsx

import React from 'react'

const Item = ({user, onRemove}) => {
    const {username, email, id} = user;
    return(
        <>
            <div>
                {id}.{username} : {email}
            </div>
            <button onClick={() => onRemove(id)}>삭제</button>
        </>
    )
}

const UserList = ({users, onRemove}) => {

  return (
    <>
        {users.map((user) => <Item user = {user} key = {user.id} onRemove = {onRemove}/>)}
    </>
  )
}

export default UserList

setUsers(users.filter(user => user.id !==id)); //user배열 중 parameter id로 가져온 것과 일치하지 않은 것만 추출하여 새로운 배열로 만들어 줌

Array.prototype.filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

리스트를 클릭하면 토글스타일 적용하기

App.jsx

import React, {useRef, useState} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

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

  const {username, email} = inputs;

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

  
  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com',
      active : true
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com',
      active : false

    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com',
      active : false
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {
      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

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

    const onRemove = (id) => {
      setUsers(users.filter(user => user.id !==id));

    }

    const onToggle = (id) => {
      console.log(id);
      setUsers(users.map(user =>
        user.id == id? 
        {
          ...user, 
          active:!user.active
        }
          :
          user
          )
      )
    }
  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} onRemove={onRemove} onToggle = {onToggle}/>
    </>
  );
}

export default App;

active:!user.active // user의 active가 true면, false. false면 true로 바꾸어줌.

UserList.jsx

import React from 'react'

const Item = ({user, onRemove, onToggle}) => {
    const {username, email, id, active} = user;
    return(
        <>
            <div
            style = {{
                color : active ? 'green' : 'gray', cursor : 'pointer'}}
            onClick={() => onToggle(id)}>
                {id}.{username} : {email}
            </div>
            <button onClick={() => onRemove(id)}>삭제</button>
        </>
    )
}

const UserList = ({users, onRemove, onToggle}) => {
    return (
        <>
            {users.map((user) => <Item user = {user} key = {user.id} onRemove = {onRemove}
            onToggle = {onToggle}/>)}
        </>
    )
}

export default UserList