[react] 배열에 항목 수정하기

https://react.vlpt.us/basic/15-array-modify.html

15. 배열에 항목 수정하기 · GitBook

 

https://muna76.tistory.com/203

[react] 배열에 항목 추가 / 배열에 항목 제거

 

 

 

배열에 항목 수정하기

 

명부에 적혀있는 이름을 누르면 색이 초록색으로 변하고 한번 더 누르면 검은색으로 변하게

 

프로세스

 

1. app 컴포넌트에 users 안의 객체 속성에 active 라는 값을 추가한다. 이 데이터값은 boolean

2. UserList 의 User 컴포넌트에 렌더링 되는 부분에 style 속성을 추가한다.( 삼항연산자 이용, cursor pointer값도 준다. )

 

 

App.js

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

(요런 식으로 쭉쭉 추가해준다.)

 

 

 

 

UserList.js 

function User({ user , onRemove }){
    return (
        <div>
            <b 
                style={{
                    cursor:'pointer',
                    color: user.active ? 'green' : 'black'
                }}
            >{user.username}</b> <span>({user.email})</span>
            <button onClick={()=> onRemove(user.id)}>삭제</button>
        </div>
    );
}

 

 

 

 

App.js 의 App 컴포넌트에 onToggle 함수 추가 

const onToggle = id =>{
    setUsers(
      users.map(user=>
        user.id === id ? {...user , active : !user.active} : user  
      )
    )
  }

 

=>

이 함수의 의미는 무엇인가?

 

id를 파라미터로 받아왔다. 이것은 내가 클릭한 번째의 user 의 id 와 비교하기 위해서 받아온것. 

해당 배열에 map을 돌려서 순서대로 해당 id (내가 누른 객체의 id값) 와 비교하는 것임.

 

이후 ,

그 id 값과 같은 id를 가진 객체의 active값을 -> 현재 active값의 반대로 (즉 현대 true면 false로 , 현재 false면 true로)

다른 속상값들은 ...user로 spread 연산자를 이용해 그대로 복사해왔다. active속성값을 객체의 맨 마지막에 넣음으로써 

rest를 사용할 수 있게 했다.

다른 id값을 가진 객체들은 그냥 변화주지 않고 그대로 뒀다.

 

이후는 onRemove를 만든것과 마찬가지로 

App -> UserList -> User 컴포넌트로 onToggle 함수를 넘겨줬고, 이 함수가 onClick 발생 했을때

user의 id를 인자값르로 넣어줘서 해당 함수가 실행될 때 파라미터로 받을 수 있도록 하였다.

 

 

 

 

---

 

useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기

 

마운트 : 처음 화면에 나타남

언마운트 : 화면에서 사라짐

업데이트 : 특정 props가 바뀌는 것을 의미

 

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.

만약에 deps 배열을 비우면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.

그리고 useEffect 에서는 함수를 반환 할 수 있는데 이것을 cleanup 함수라고 부른다. 

cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하면 편하다.

deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

 

 

UserList의 User 컴포넌트 안에

useEffect를 넣어보자

unction User({ user , onRemove , onToggle }){
    useEffect(()=>{
        console.log('컴포넌트가 화면에 나타남');
        return ()=>{
            console.log('컴포넌트가 화면에 사라짐');
        };
    },[]);

 

 

이후 항목을 추가하고 항목을 삭제할때마다

해당하는 콘솔이 찍히는것을 확인할 수 있었다.

-> 항목을 추가하면 화면에 새로 나타나도 (이게 마운트)

항목을 삭제하면 화면에서 사라지므로 (언마운트)

 

다음과 같은 console이 찍히는 것이다.

 

 

 

 

 

* 마운트시에 수행되는 작업들

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

 

 

* 언마운트시 하는 작업들

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

 

 

 

deps 에 특정 값 넣기

처음에 한 것은 deps가 비어있는 상태였다.

이번에는 deps를 넣고 useEffect를 사용해본다.

deps를 넣게 되면 

1. 컴포넌트가 처음 마운트 될 때 

2. 지정한 겂아 바뀔 때 

3. 언마운트 될 때

4. 값이 바뀌기 직전

위와 같은 다양한 상황에서 함수가 호출된다.

 

 

User 컴포넌트에 있는 useEffect를 수정해준다.

  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]); // -> 여기 deps값을 넣어줬음