[React] 리액트 주요 문법 정리(useEffect, useState, props, map ...)

 

useEffect

useEffect는 함수형 컴포넌트에서 side effect를 처리하는 리액트 훅이다.

Side Effect
컴포넌트 렌더링과 직접적인 관련이 없는 작업들로, API 호출, DOM 조작, 타이머 설정 등이 있다.

useEffect(() => {
	console.log('컴포넌트 나타남');
    
    fetch('/api/data')			//1. 서버에 요청
      .then(res => res.json())		//2. 서버에서 json으로 변환
      .then(data => 
      console.log(data[0].title); 	//3-1. '제주도 여행'
      console.log(data.length);		//3-2. 2
      
      setData(data));			//4. 변환된 데이터를 받아 상태 업데이트
}, []);

 

서버에는 JSON 문자열 형태로 저장이 되어있다.

서버에서 클라이언트로 보내는 형식은 아래와 같다.

"[{\"id\":1,\"title\":\"제주도 여행\"},{\"id\":2,\"title\":\"부산 여행\"}]"

 

res.json()을 실행시켜 문자열 -> JavaScript 객체로 변환시킨다.

변환된 전체 배열의 매개변수를 data로 표현한 것이다.

[ { id: 1, title: "제주도 여행" }, { id: 2, title: "부산 여행" } ]

 

async/await 방식

const fetchData = async () => {
  try {
   const res = await fetch('/api/data');  //1. 서버에 요청
   const data = await res.json();	//2. json 객체로 변환
   setData(Data);			//3. 변환한 데이터를 업데이트
   } catch(error) { 			//4. 에러시 콘솔창
     console.error(error);
     }
 };

---

useState

useState는 함수형 컴포넌트에서 상태를 관리하기 위한 리액트 훅이다.

# 초기화
const [count, setCount] = useState(0)

# 상태 변경
<button onClick={() => setCount(count + 1)}>증가</button>

count값을 0으로 초기화시킨 후, setCount를 통해 상태 변경을 감지해 1씩 증가시킨다.

 

useState가 없다면?
변수 값은 바껴도 화면 렌더링이 되지 않고, 재실행할 때마다 초기값으로 리셋된다.

 

의존성 배열 X (매번 실행)

useEffect(() => {
  console.log('렌더링할 때마다 실행');
});

 

 

문자열 로직

function Input() {
  const [name, setName] = useState('');
  
  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>입력한 이름: {name}</p>
    </div>
  );
}

 

사용자 입력 : '김'
> onChange 함수 실행 : setName('김')
> name이 입력값으로 변경: name = '김'
> 화면 재렌더링 입력한 이름: '입력한 이름: 김'

이벤트 객체 'e'

 

e는 이벤트 객체로, e.target은 이벤트가 발생한 HTML 요소를 뜻한다.

onChange를 별도 함수로 분리하면 아래 코드가 된다.

const [name, setName] = useState('');

const handleNameChange = (e) => {
  setName(e.target.value);
};

<input 
  value = {name}
  onChange = {handleNameChange} 
/>