동기적 코드 vs 비동기적 코드

동기적 코딩은 코드가 순차적으로 실행되는 방식으로, 한 작업이 완료되기 전에 다음 작업이 시작되지 않습니다. 즉, 코드는 위에서부터 아래로 순서대로 실행됩니다.

반면에, 비동기적 코딩은 작업이 완료될 때까지 코드의 실행이 블록되지 않고 다른 작업을 계속 수행할 수 있는 방식입니다. 주로 비동기적 작업은 콜백 함수, Promise, async/await 등을 사용하여 구현됩니다. 이를 통해 여러 작업을 동시에 처리하거나, 네트워크 호출과 같은 작업이 완료될 때까지 다른 작업을 수행할 수 있습니다.

async await

await 는 최상위 레벨 코드에서 작동
하지 않습니다.

is a concept in which if you want to run a part of your code which you think might take some time you can write it in an asyn function ...
Async is short for asynchronous which means not in
synchronisation with the rest code ... Await keyword is use to wait and get the result once the async functions returns . Hope it helps.

async await은 코드 일부가 시간이 걸릴 것으로 예상되는 경우, 해당 부분을 async 함수로 작성하여 실행하는 개념입니다. "Async"는 비동기를 나타내며, 나머지 코드와 동기화되지 않음을 의미합니다. await 키워드는 async 함수가 반환될 때까지 기다렸다가 결과를 얻는 데 사용됩니다. 이것이 도움이 되기를 바랍니다.

———

리액트에서 동기적으로 코딩하려면 주로 Class Components에서의 lifecycle 메서드를 사용하거나, 함수형 컴포넌트에서는 useEffect 훅을 활용합니다. 또한, 상태(State)를 활용하여 동기적인 데이터 관리를 할 수 있습니다. 코드의 가독성을 높이고 유지보수성을 강화하기 위해 함수를 작은 단위로 분리하는 것도 좋은 방법입니다.


—-

동기적인 흐름을 유지하면서 비동기 작업을 처리할 수 있게 됩니다 이게 무슨 말이야 말 장난하지말고 쉽게 설명해

동기적인 흐름을 유지한다는 것은 코드가 위에서부터 순차적으로 실행되는 것을 의미합니다. 코드 한 줄이 실행될 때까지 다음 줄은 기다리게 됩니다.

반면에, 비동기 작업은 일반적으로 시간이 오래 걸릴 수 있습니다. 예를 들어, 네트워크에서 데이터를 가져오거나 파일을 읽는 작업이 해당됩니다. 만약 동기적인 방식으로 이러한 작업을 처리한다면, 작업이 완료될 때까지 다음 코드 실행이 차단되어 아무 것도 할 수 없게 됩니다.

useEffect를 사용하면 이러한 비동기 작업을 동기적인 흐름에 맞춰 조절할 수 있습니다. 즉, 비동기 작업은 백그라운드에서 동작하면서 코드의 나머지 부분은 계속 실행됩니다. 작업이 완료되면 useEffect 내에서 지정한 로직이 실행되어 필요한 상태를 업데이트하거나 다른 동작을 수행할 수 있게 됩니다. 이로써 전체 코드는 순차적으로 진행되는 것처럼 보이면서도 비동기 작업을 처리할 수 있게 되는 것이죠.

—-

useEffect 함수는 리액트 함수 컴포넌트에서 부수 효과를 다루기 위한 특별한 훅입니다. 부수 효과란 컴포넌트의 렌더링과는 직접적으로 관련이 없지만, 컴포넌트의 생명주기와 연관된 작업들을 말합니다. 주로 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등이 해당됩니다.

useEffect는 다음과 같은 형태를 가지고 있습니다:

useEffect(() => {
  // 부수 효과를 수행하는 코드
}, [dependencies]);


여기서 첫 번째 매개변수는 부수 효과를 정의하는 함수이고, 두 번째 매개변수인 dependencies 배열은 해당 부수 효과 함수가 의존하는 값들을 나타냅니다.

useEffect는 컴포넌트가 렌더링될 때마다 실행되며, 의존성 배열에 지정된 값들이 변경될 때마다도 실행됩니다. 의존성 배열이 빈 배열인 경우 컴포넌트가 처음 마운트될 때만 실행되고, 언마운트될 때 정리(clean-up) 함수가 호출됩니다.

만약 dependencies 배열이 빈 배열 []이면, useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행되며, 언마운트 시에 정리(clean-up) 함수가 호출됩니다. 이 경우, Effect executed!가 콘솔에 한 번만 찍힙니다.

반면에, dependencies 배열에 특정 변수들이 들어있다면, 해당 변수들 중 하나라도 값이 변경될 때에만 useEffect가 실행됩니다.