비동기(Asynchronous)란?
: 비동기를 설명하기 전에 동기를 잠깐 언급하자면, 쉽게 말해 코드의 순서대로 코드가 진행되는 것을 말한다. 이 패러다임은 비동기를 배우기 전에는 당연하다. 왜냐면 컴파일러(컴퓨터)는 코드를 위에서부터 아래로 읽기 때문이다.
또한 클라이언트-서버 아키텍쳐에서의 비동기라는 개념이 탄생하기 전에는 한번 통신할때 html파일과 js파일을 모두 넘겨주었다. 즉 SPA(Single Page Application),
AJAX(Aysnchronous)가 구현되지 않고, 전체 페이지가 렌더링됐다는 말이다.
그말은 즉슨 혹여나 렌더링이 다시 필요없는 부분도 렌더링되어 불필요한 통신이 이뤄질 수도 있다는 말이다. 그래서 탄생한 개념이 비동기(Asynchronous), AJAX(Asynchronous JavaScript And XML)이다.
그렇다면 동기와 다르게 비동기는 불필요한 렌더링을 하지않고 필요한 부분만 서버에 요청해서 클라이언트가 받아와 브라우저에서 렌더링할 수 있을 것이다.
정리를 해보면,
동기 : 동시에 일어남, 비동기 : 동시에 일어나지 않음
다음은 그런 비동기의 특성을 살려 "저는 박주홍입니다"라는 문자열을 10초 뒤에 출력하려는 코드다. 임의로 10초걸리는 함수를 setTimeout을 이용하여 시간을 걸리게했지만 (10초동안 렌더링하면 사용자가 사용을 안하겠지만 예시로..) 만약 그러한 함수가 있다면 그 함수가 실행되기 전에 다른 아래있는 코드들은 실행이 되지 않을 것이다. 해서 먼저 실행하게 해준다. 그리하여 다음과 같은 결과값이 나오는 것이다.
// 만약 동기적인 코드라면 10초를 다 기다려서야 아래 코드가 실행될 것이다.
function 10초걸리는함수(){
setTimeout(()=>{
console.log("저는 박주홍입니다");
}, 10000)
}
console.log("안녕하세요");
10초걸리는함수();
console.log("잘 부탁드립니다");
// output => 안녕하세요 잘 부탁드립니다 저는 박주홍입니다.이러한 비동기적, Ajax적 메소드는 대표적으로 다음과 같다.
setTimeout
fetch() // 기본적으로 method를 안적으면 GET으로 간주함
fetch(주소, {
method: 'POST', // 사용할 http메소드 선택 GET/ POST / PUT / DELETE
body: JSON.stringify(JSON형태로 된 데이터) // 서버에 보낼 데이터
})useEffect
: useEffect는 리액트에서 side effect가 되거나 비동기적으로 처리되야하는 함수를 처리한다.
리액트로직이외에 side effect가 발생할때 처리하기 좋기위해 useEffect를 사용한다.
리액트는 기본적으로 state, props가 변경될때마다 렌더링을 하게 되는 데, 만약 비동기적으로 state, props을 변경하더라도, fetch나 어떤 로직을 사용하더라도 렌더링이 안되게 하고 싶다면 useEffect에서 관리하자.
useEffect(()=>{}) // state, props 변경 시마다 작동
useEffect(()=>{}, []) // 최초 1회 컴포넌트 렌더링시
useEffect(()=>{}, [hello]) // hello 변경 시 작동참고:
Ajax는 왜 필요한가?
https://www.youtube.com/watch?v=_Kh5Kdha3Ww
리액트로 사고하기 공식문서
https://ko.reactjs.org/docs/thinking-in-react.html
리액트 useEffect 사용법
https://www.daleseo.com/react-hooks-use-effect/
