[FE] React.js : useEffect 의 용도 / 사용 예시

useEffect

용도:

 

- 처음으로 Component를 Rendering한 이후에 어떤것을 하는 것.

- 어떤 화면을 보여줄 때 단순히 UI만 보여주는 것이 아니라 원하는 데이터를 넣어서 보여줘야 한다!

- 그리고 이러한 데이터는 데이터베이스에 있는 경우가 많다.

- 그런 작업은 렌더링 이후에 작업이 가능하다. 

- 그래서 데이터베이스에서 데이터를 불러오는 그런 일을 useEffect를 사용해서 컴포넌트가 렌더링된 이후에 사용한다.

 

• 컴포넌트가 마운트가 되었거나 업데이트 될 때마다 호출된다.
• 텅텅비어진 배열을 두번째 인자로 전달한다면, 마운트가 되었을 때만 호출이 된다. 
• 선택적으로 원하는 변수를 배열로 전달하면 걔네가 바뀔 때만 호출됨
  • 아무것도 넣지 않으면 업데이트 될 때마다 호출이 되는 것이다!
• useSate와 useEffect는 import를 해줘야한다. 

Javascript - Fetch를 먼저 사용해보자.

기본적인 것이니깐 먼저 써보자

Postman을 이용하면 어떻게 쓰는지 코드별로 안내되어있음

 

fetchapi에서 response.json()으로 받아올 수 있음

 

위코드를 해석하면

 

컴포넌트가 마운트될 때만 (useEffect에서 두번째 인자 빈 배열로 두면됨[])

api를 get으로 불러와서 response되면 json으로 받아오고 그 걀과값은 result.items를 videos라는 배열에 useState를 이용하여 담아준다. 그것이 const [videos, setVideos] = useState([]);

 

컴포넌트에 관련된 모든 것들을 폴더링해서 작업을 한다.

css, jsx, 테스트 파일 등 다 해당 폴더에 넣기

 

 

video_item.jsx가 있고 video_list.jsx가 있다.

vidoItem은  단순히 props로 받아온 것을 보여주는 식으로 만들어보자

 

video_item.jsx

const VideoItem = props => <h1>{props.title}</h1>

//props로 받아온 것을 리턴하는 함수를 만들어 봄

 

//props로 무언가를 받아옴

//app.jsx를 확인해보니 {videos} 즉 api로 받아온 그 데이터들의 배열을 받아온거를 props로 list에 넘김

const VideoList = props => (

  <ul>   //psops로 받아온 배열의 비디오를  맵으로 도는데 한개당 videoItem 컴포넌트를 호출하여 아이디랑 비디오를 넣어줌

  {props.videos.map(video =>     // 비디오 아이템에서는 props로 받은 비디오의 sippet title을 보여줌

   <VideoItem key={video.id} video={video} /> //unique한 키를 써야함. 

))}

  </ul>

);

 

// key는 요소리스트를 만들 댸 포함해야하는 특수한 문자열 속성임

// key는 리액트가 어떤 아이템이 바뀌었는지 혹은 추가되었는지 혹은 삭제되었는지를 인식하게 해줌

// 그래서 key= {video.id}를 추가함

export default VideoList; //함수

 

전달된 props(즉 videoItem의 요소를 확인하는 방법)

아하~ video.snippet에 title이 있구나!

//잘안되면 전달된 state확인 props확인

 

모든 단위가 컴포넌트임.

VideoList는 아래와 같이 리스트를 만들어주는 컴포넌트이고, 그안에 쓰인 Video아이템은 각 하나의 비디오의 요소의 이름을 뿌려주는 것

<ul> 아이템  </ul>

<ul> 아이템  </ul>

<ul> 아이템  </ul>

.

.

 

 

 

 

* 앨리의 드림코딩 복습