[모각코] ReactJS 시작하기(완) - Effects | 데이터 문서화

이번주차에는 저번 모각코회차(8/6(토))에서 회의를 바탕으로 역할분담한 비개발영역을

진행하고, 남는시간에는 아직 프로젝트를 시작하기 앞서 React의 주요한 부분을 학습하지 못해

개념학습을 마무리하였다.

 

프로젝트 준비

우리 팀은 ✨리액트를 활용한 모현 맛집지도✨를 제작하는것이 최종 목표였다.

이에 프로젝트 개발에 앞서 비개발 영역을 먼저 분담하였다.

회의록은 노션으로 작성하였다

나는 데이터생성의 역할을 맡았는데, 학교주변의 음식점의 데이터는 카카오나 네이버 api에 담겨있겠지만

우리의 목표는 좀더 학생들이 이용하였을때 효율적이고 가시적인 서비스를 만드는것이였다.

따라서 데이터를 엑셀에 새롭게 정리하고 생성하기로 하였다.

 

리액트 개념 공부- Effect

남는 시간에는 리액트 Effect~라우터까지 공부하려고했다 ! 사실 위에는 비개발 측면이라 이걸 좀더 상세하게 포스팅하려고한다

먼저 Effect의 필요성을 알기위해 전에 만들어봤던 counter 예제코드를 봐보자

import {useState} from "react";

function App(){
	const [counter,setValue] = useState(0);
    const onClick = ()=>setValue((prev) => prev + 1);
    console.log("is render?");
    return(
    	<div>
        	<h1>{counter}</h1>
            <button onClick = {onClick}>Click me</button>
        </div>
    );

}

참고로 앞선 함수들은 항상 React.이렇게 썼는데 이제는 creat-react-app으로 라이브러리 전체를 다 같이

가져와주니까 안써도된다

 

무튼 console.log를 통해 언제 render되는지, 해당 코드가 호출되는지 보면 버튼을 클릭할때마다

로그가 출력된다(당연)

하지만 만약 코드에서 다양한 api와 state코드가 같이있다고 가정해보자

그럼 api는 변화가 없는데 state 변화만 생겨도 render되버리면 좀 코드가 덜 효율적일것이다

이때 useEffect 라는 함수를 쓰면된다.

useEffect를 사용해서 위의 예제를 바꿔보자 

import {useState ,useEffect} from "react";

function App(){
	const [counter,setValue] = useState(0);
    const onClick = ()=>setValue((prev) => prev + 1);
    console.log("I run all the time");
    useEffect(()=>{
    	console.log("Call the API..");
    },[]);
    
    return(
    	<div>
        	<h1>{counter}</h1>
            <button onClick = {onClick}>Click me</button>
        </div>
    );

}

이렇게 해서 버튼을 우다다 눌러보면 useEffect 내부에 써준 call the Api..구문은 한번만 찍힌다.

 

여기서 조금 더 응용을 해보면 아래와 같이 검색기능을 추가한 예제가있다고 해보자

 

import {useState ,useEffect} from "react";

function App(){
	const [counter,setValue] = useState(0);
    const onClick = ()=>setValue((prev) => prev + 1);
    const onChange = (event)=>setKeyword(event.target.value);
    console.log("I run all the time");
    useEffect(()=>{
    	console.log("Call the API..");
    },[]);
    useEffect(()=>{
    	console.log("SERACH for",keyword);
    },[]);

    return(
    	<div>
        	<input value ={keyword} 
            onChange = {onChange}
            type="text"
            placeholder="Serach here"
            />
        	<h1>{counter}</h1>
            <button onClick = {onClick}>Click me</button>
        </div>
    );

}

이렇게하면 input에다가 값을 입력할때뿐만아니라버튼을 클릭해도 Search for 이 log로 찍힌다(띠용;;)

그 이유는 화면에서 state가 변화가 있을때마다 useEffect를 호출하기 때문이다

그래서 버튼을 클릭하면 counter값이라는 state가 바뀌는거 니까 log가 찍혀버린다.

이때 우리가 아직 사용하지않았던 두번째 인자를 사용해주면된다

 

import {useState ,useEffect} from "react";

function App(){
	const [counter,setValue] = useState(0);
    const onClick = ()=>setValue((prev) => prev + 1);
    const onChange = (event)=>setKeyword(event.target.value);
    console.log("I run all the time");
    useEffect(()=>{
    	console.log("Call the API..");
    },[]);
    useEffect(()=>{
    	console.log("SERACH for",keyword);
    },[keyword]);
    return(
    	<div>
        	<input value ={keyword} 
            onChange = {onChange}
            type="text"
            placeholder="Serach here"
            />
        	<h1>{counter}</h1>
            <button onClick = {onClick}>Click me</button>
        </div>
    );

}

저 대괄호안에 대상이되는 state를 적어주면 끝!

 

이번시간은 엑셀 작업이 좀 걸려서 useEffect까지만 공부를 했는데 다음 모각코회차까지

더 학습할수있으면 추가적으로 포스팅하려고한다