C언어 예술가

우리는 종종 비동기 api호출을 useEffect 내에서 할 경우가 있다. 이 때 async ~ await을 사용한다 가정한다. 에초에 useEffect에 전달되는 첫 번째 파라미터 함수는 동기함수며 동기 함수 내에서 비동기 호출을 처리를 하기 위해서는 호출할 비동기함수를 또 다른 비동기 함수로 감싸줘야 한다. async function fetchData() { ... } useEffect(()=> { const func = async ()=> { const response = await fetchData(); } func(); },[])그리고 위 코드 처럼 결국엔 func 함수가 비동기적으로 호출되기 때문에 호출 결과를 동기적으로 처리할 수 없다. 따라서 fetchData의 결과로 Error가 발생된다..

리액트의 가장 기본적이고 핵심적인 상태값을 변경하는 setter 함수(메소드)에 대해서 정리하고자 한다.이 setter 메소드는 클래스형 컴포넌트라면 this.setState가 빌트인 되어 있고 함수형 컴포넌트라면 직접 정의해서 사용할 수 있다.클래스 방식이나 함수형 모두 글의 맥락을 보면 동일하므로 여기에서는 클래스형 컴포넌트를 사용하여 설명한다.그러면 왜 setState는 비동기로 동작할까?리액트에서는 상태값은 아주 핵심적이고 특별하다. 어떤 상태값이 변경되면 그 영향하에 있는 컴포넌트들은 렌더링이 된다. 그리고 어떤 컴포넌트가 렌더링되면 그 하위 컴포넌트들 역시 리렌더링 된다. 이렇게 연쇄직인 방법으로 데이터의 변화가 돔 요소에 실시간으로 반영되어 우리에게 보여지는 것이다.그러면 왜 setState..

예전처럼 공들여 블로그 글을 쓰기가 귀찮다. 그래서 대략적으로만 정리하려 한다.리액트의 고전적인 클래스 컴포넌트와, 훅의 등장으로 새롭게 관심 받는 함수형 컴포넌트를 비교하기 위해 글을 쓴다. 보통 함수형 컴포넌트로 페이지를 만들지만 많은 문서와 라이브러리가 클래스형 컴포넌트를 지원한다. 따라서 이 둘을 모두 알아야할 필요가 있다.기본적으로 두 차이를 이해하려면 적어도 전통적인 함수와 클래스의 차이점을 알아야할 것이다. 우선 리액트에서 페이지를 렌더링하는 방법은 클래스의 경우 render 메소드를 사용한다. 반면에 함수형 컴포넌트는 함수 자체가 render를 담당한다고 보면 된다.둘 다 리턴 값으로 페이지의 모습을 표현하게 된다.함수형 컴포넌트function FuncComp() { return ( Hel..

기록용...리액트에서 대량의 리스트 구현시 성능 최적화를 위해 react-virtualized를 사용 중 모바일과 데스크탑 화면 전환시 props로 전달할 height , width를 반응형으로 구현할 방법을 생각하다 다음과 같은 글을 찾음.https://stackoverflow.com/questions/35073669/window-resize-react-redux/35075190#35075190분명 react-virtualized 내에서 해결하는 방법이 있을 거라 짐작하지만 위 내용도 흥미로워서 기록.답변자가 제대로된 테스트를 하지는 않았으나 리덕스 스토어에 스크린 사이즈를 기록하여 상태변화시 앱의 상태를 변화시킨다는 내용.실제 스크린 사이즈가 변화될 때 직접 변화되는 상태 값에 접근하는 것이 아닌 복..