useEffect

• useEffect는 페이지가 랜더링 될 때마다 작업을 처리하는 역할을 한다.
• 컴포넌트가 실행될 때마다 아래에 console.log("안녕하세요") 가 실행되게 된다.

useEffect (() => {
	console.log("안녕하세요")
})

• useEffect는 두번째 파라미터를 받는데 [] 형식으로 작성한다.
• 만약 배열안에 값이 아무것도 없다면 랜더링 될 때 한번만 실행이 되고 값이 있는 경우 그 값이 변경될 때마다 실행이 된다.

useEffect (() => {
	console.log("안녕하세요")
}, [])

• 만약 return 값을 넣어준다면 값이 사라질 때 작업을 처리하게 된다.

useEffect(() => {
    console.log('Color changed');

    return () => {
      
    }
  }, [color]);

---

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }){
    const {username, email, id, active } = user;
    useEffect(() => {
        console.log('컴퍼넌트가 화면에 나타남');
        // 컴퍼넌트가 마운트 될 때 추가하는 작업
        // props를 받은 값을 state의 컴퍼넌트로 설정할 때
        // 외부 API 요청 (REST API)
        // 라이브러리
        // setInterval, setTimeOut
        return () => {
            console.log('컴퍼넌트가 화면에서 사라짐')
        }
    }, [])
    return (
        <div>
            <b style={{
                color: active ? 'green' : 'black',
                cursor: 'pointer'
            }}
                onClick={()=>onToggle(id)}
            >
                {username}
            </b> <span>({email})</span>
            <button onClick={()=>onRemove(id)}>삭제</button>
        </div>
    )
}

function UserList( { users, onRemove,onToggle } ) {

    

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

export default UserList;