UseState와 UseEffect 뭐가 다를까?

UseEffect는 여러 역할을 수행한다
✅ 데이터 가져오기 : 백엔드 API에서 회원정보 가져오기
✅콘솔 출력 또는 로깅: console.log()
✅타이머 설정 : setTimeout,setInterval
✅Dom 직접 조작 : 특정 DOM 요소에 포커스 주기
✅이벤트 등록/해제 : 윈도우 리사이즈 이벤트 등

useEffect( () => { },[])의 의미는?
첫 번째 매개변수: 실행할 함수
두 번째 매개변수: 의존성 배열(dependencies)

• [] -> 처음 1회만 실행됨
• [state] -> 해당 state가 바뀔때마다 실행됨

1.데이터 가져오기

useEffect(()=>{
   axios.get('/user/list').then(  );
},[]);

2. 콘솔 출력

useEffect(()=>{
  console.log('컴포넌트 렌더링됨');
  }, []);

3. 타이머

useEffect(() => {
  const timer=setTimeout(()=> alert("3초 지남!"),3000);
  return () => clearTimeout(timer);
  },[]);

관리자 페이지에서는 데이터 가져오기를 사용하는데

axios.get('/user/list)
.then(response=> {
   setMembers(response.data);
   })

서버에 요청을 보내고 비동기적으로 결과를 돌려준다.
이때 .then()은 그 요청이 성공했을 때 응답(reponse)을 처리하는 코드이다

Q. 여기서 응답할 때에 왜 함수로 작성해야하지?
이유는 자바스크립트에서는 .then()이나 async/await 같은 비동기 처리방식은
"콜백 함수"로 결과를 받아서 처리하기 때문이다
즉, 응답이 왔을때 실행해야 하는 함수라는 의미이다

그렇다면 응답이 실패했을 때에는?

useEffect(()=> {
   axios.get('/user/list')
       .then(response=> {
           setMembers(response.data);
       })
       .catch(error=> {
           console.error('회원 리스트 가져오기 실패:',error);
       });
   }, []);

.catch()는 요청이 실패했을 때 실행되는 함수이다
똑같이 비동기 처리이기에 실패할때까지 기다렸다가
실패하면 실행된다

[] 빈 배열은 컴포넌트가 마운트될 때 실행된다
즉, 페이지가 열릴때만 회원목록을 불러오도록 설정한다

useState 는 상태값 변경시 리렌더링이 발생한다

1. setState는 비동기로 동작한다 (정확히 비동기함수는 X)
   useState의 setter 함수를 호출한 이후 바로 다음 줄에서 해당 state값을
   참조하면 아직 바뀌기 이전 state가 참조된다
   즉, 초기값 0에서 setState(5)를 하고 console.log(state)를 바로
   다음줄에 하면 0 이 출력된다
   usetState의 setter 함수가 비동기적으로 동작하기 때문이다

   function App() {
   let [count,setCount]=useState(0);
   let [age, setAge] = useState(20);
   
   return (
   <div>
     <div> 나이:{age} </div>
     <button onClick={() => {
        setCount(count +1);    //나중 실행 
        if (count <3) {
           setAge(age +1);
         }
         }}
         >
           카운트 : {count}
        </button>
        </div>
        );
        }
      
     

1. 버튼을 누르면 count를 +1 해줍니다
2. 그리고 만약에 count가 3보다 적으면 age +1 해줍니다

버튼을 계속 클릭하면 age는 20에서 22가 되면 더 이상 증가하지 않는다고 생각할 수 있지만 age는 23까지 증가한다. count가 3일때에도 age +1를 해주고 있다는 것이다 이는 state 변경함수가 비동기적으로 동작하는 함수이기 때문이다

2. setState 함수는 비동기적으로 작동하지만 동기함수이다!
3. state의 불변성을 지켜야 한다
   상태 변경 시 기존의 상태 객체나 배열을 직접 수정하지 않고
   새로운 객체나 배열을 생성하여 상태를 업데이트하는 것을 의미한다

불변성을 지켜야 하는 이유는 무엇인가?
리액트가 상태를 업데이트 할 때 얕은 비교를 수행하기 때문이다
예를 들어, 상태가 배열이라면 배열의 요소 하나하나를 다 비교하는 것이 아닌 열의 참조값만을 비교하는 것
참조값 : 배열과 객체가 어디에 있는지를 가리키는 주소표

불변성을 유지하는 예시(새로운 배열(객체) 생성)

const [item,setItems] = useState(['item1', 'item2']);
const addItem=newItem => {
      setItems([...items,newItem]); 

[출처]
https://wonbin109.tistory.com/164 (useState그냥쓰지말고알고쓰자)