avoid using useEffect 요즈음 블로그 글 중에서 useEffect 사용을 피하라는 내용의 글을 보고 이유가 궁금해서 나름대로 공부해보았다. useEffect란 ? 외부 시스템과 리액트 컴포넌트를 동기화(synchronize)시켜주는 리액트 훅 useEffect 사용을 피해야하는 이유 나는 보통 useEffect를 api 호출(위에서 언급한 외부 시스템이라 할 수 있겠다) 해서 컴포넌트의 상태를 useState 훅의 setter 함수로 변경시킬 때 컴포넌트가 계속 리렌더링 되는 것을 막기위해 빈배열을 의존성배열로 해서 컴포넌트가 mount된 후 한번만 api를 호출하도록 사용했다. 하지만, 이 경우에 useEffect 내부에서 호출한 api는 컴포넌트가 마운트된 후 즉, UI 가 그려지고 나서 실행되기 때문에 UI가 다 그려지고.. 뜨거운 SSR은 가고 남은 건 볼품없지만 (feat. SSG, CSR, ISR) 왜 SSR ( Server Side Rendering ) 을 도입하고자 하였나? React에서 CSR을 하면 는 빈 HTML을 불러와서 브라우저에서 렌더링하여 화면을 그린다. (React 18버전부터는 RSC 라고 하는 서버컴포넌트를 사용할 수 있으나 RSC와 SSR은 다르다 !) React 코드를 보면 index.html 파일에 아래와 같이 root DOM 노드를 나타내는 코드가 있고, 자바스크립트 코드들은 모두 브라우저에서 실행되기 때문에 html 파일이 비어있다. 이렇게 되면 브라우저가 켜지면서 화면이 그려지기 시작하기 때문에 초기 로딩 속도가 느리다는 단점이 있다. (물론 코드가 많지 않은 프로젝트는 빠르게 로딩된다.) 반면, SSR은서버에서 렌더링 되어 브라우저로 전달된 정적 HTML 페이지를 .. FSD (Feature-Sliced Design) 아침에 개발바닥 오픈카톡방에서 FSD를 보고 프로젝트시 폴더구조 정할 때 도움이 될듯하여 공식문서를 짧게 정리 해봤다. FSD 간략한 소개 FSD는 프론트엔드를 위한 구조로, 구조화되어 있으면 매번 바뀌는 비즈니스 요구에 더 잘 대응할 수 있으며 프로젝트에 신입 개발자가 투입되었을 때에도 이해하기 쉽기 때문에 나왔다고 한다. FSD는 아주 작은 싱글 페이지 어플리케이션에는 도움이 되지 않을 수 있으나 Google Cloud Admin dashboard 정도의 큰 앱에는 커스텀된 아키텍처가 필요하고 이 때, FSD에 기반하여 만들 수 있다. 이미 프로젝트가 있다면 점진적으로 채택할 수 있다. (FSD를 점진적으로 도입하는 법은 하단에 있다.) FSD 구성 크게 Layers ,Slices, Segments .. API 호출시 axios와 fetch의 차이 fetch API는 보통 이렇게 GET 요청을 하는데 fetch(url) .then((response) => response.json()) .then(console.log); axios 라이브러리는 이렇게 GET 요청을 할 수 있다. axios.get('/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { // always executed }); axios는자동으로 JSON 데이터를 Array나 Object로 변환해주는 반면 fetch API 는.. 왜 클래스형이 아닌 react hooks일까? 이글은 인프런 John Ahn 님의 따라하며 배우는 리액트 A-Z 강의를 보며 이해한 내용을 정리한 글입니다. 리액트 컴포넌트에는 Class Component 와 Functional Component가 있습니다. 일단 결론은 Functional Component를 요새 많이 사용한다는 것인데 Functional Component는 Class Component에 비해 더 적은 기능을 제공하고(?) 코드가 짧고 심플하며 성능이 빠릅니다. 여기서 함수형 컴포넌트가 클래스형에 비해 더 적은 기능을 제공한다는 것은 리액트 생명주기 때문이었으나 React 16.8 Hooks 업데이트로 함수형 컴포넌트에서도 생명주기(Mounting-> Updating-> Unmounting)를 사용할 수 있게 되었습니다. let[기.. 리액트가 무엇일까? 리액트가 만들어진 배경 ( 아래 글을 보며 공부한 내용 ) https://react.vlpt.us/basic/01-concept.html 1. 리액트는 어쩌다가 만들어졌을까? · GitBook 01. 리액트는 어쩌다 만들어졌을까? 리액트 학습을 본격적으로 하기 전에, 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것입니다. JavaScript를 사용하여 react.vlpt.us 자바스크립트는 HTML의 DOM을 선택해서 이벤트를 통해 DOM을 바꾸었는데 웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽습니다. 그래서 AngularJS 등의 프레임워크가 만들어졌습니다. 이러한 프레임워크는 자바스크립트의 특정 값이 바뀌면 특정 D.. 이전 1 다음
