대범하게

useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. useEffect 란? useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 근데 useEffect는 왜 Effect라는 이름을 가질까? Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ") 이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 더보기 React의 클래스 컴포넌트에서는 componentDidMount, componentD..

목차 1. 브라우저에서 Javascript의 존재 이유는 DOM 조작이다. 2. Javascript로 특정 DOM을 선택하는 방법은? 3. React에서는 특정 DOM을 어떻게 조작하는가? 4. React의 가상 DOM과 상호 작용하며 실제 DOM 조작하기 4-1. useRef 예제: useRef와 useState 함께 활용 5. useState와 useRef의 실질적인 차이점은? useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택하기) (* 이해의 흐름을 바탕으로 작성한 글이기에 지식을 뽑기보다 천천히 정독함을 권장해드립니다. ) 필자는 useRef가 useState와 useEffect처럼 한 번에 이해되지 않았다. 드디어 이해했기에 글을 작성해본다. TODO: "특정..

Q. React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받을 때, 상태가 바뀌는가? 면접에서 이런 질문을 받는다고 생각해보자. 이 질문의 답변부터 얘기하자면, 💡 React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 일반적으로 상태는 자동으로 변경되지 않는다. (하지만, 참조 형식의 객체를 다룰 때는 참조의 동등성을 비교할 수 있다.) Why? 왜 상태가 변경되지 않는가? React에서 상태의 변경 여부는 참조가 아닌 값의 동등성(equality)을 기준으로 판단된다. 상태를 업데이트할 때, setState 또는 useState를 사용하는 경우 React는 이전 상태와 새로운 상태의 값을 비교한다. 이를 통해 React는 변경된 상태만 업데이트하고, 변경되지 않은 상태는 무..

목차 1. React.Fragment, Fragment의 차이점은? 2. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야하는가? 1. React.Fragment, Fragment의 차이점은? 와 는 동일한 기능을 수행하는 React의 기능이다. 는 JSX에서 단축 구문으로 사용되며, 는 완전한 형태의 React 요소이다. React에서는 컴포넌트에서 여러 요소를 반환하거나, 부모 요소로 감싸지 않고 여러 요소를 렌더링해야 할 때가 있다. 아래 두 예시는 동일한 결과를 생성한다. 와 는 컴포넌트가 렌더링될 때 실제 DOM에는 나타나지 않고, 여러 요소를 그룹화하는 역할을 수행한다. JSX에서 는 축약된 표현으로 사용되며, 는 명시적인 형태로 사용된다. 하지만 기능적으로는 완전히 동일하다. //..

vite로 react 프로젝트 설치 1. vite란? 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다. https://vitejs-kr.github.io/ (기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/) Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 2. Create React App 대신 사용하는 이유 CRA는 Javascript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다. *Esbuil..

결론적으론 .js와 .jsx의 확장자로서의 차이는 없다. 리액트 파일은 통상적으로 .js 대신 .jsx 확장자를 사용한다. 이런 컨벤션은 JSX가 표준 Javascript가 아니기 때문에 발생했다고 한다. 즉, 파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절하다. 반면에 jsx나 Typescript처럼 파일 내부에 표준 Javascript 이외에 다른 코드가 있다면 해당 파일의 확장자는 .js가 아닌 다른 확장자로 지정한다고 한다. 예를 들어 jsx가 사용된 파일 확장자는 jsx로, typescript가 작성된 파일 확장자는 .ts로 지정한다. Reference https://stackoverflow.com/questions/46169472/reactjs-js-vs-j..

0. Before enter to Fetch, What is AJAX? HTML에서 화면을 이동하기 위한 방법이 어떤 것이 있을까? 방식으로 주소를 줘서 이동하는 것을 생각할 수 있을 것이다. 그러나 이 방식은 화면 전체를 교체하는 것이기 때문에 이동할 때마다 화면이 깜빡거리게 될 뿐더러 페이지의 용량이 크다면 전환까지의 시간이 오래 걸린다. 심지어 자바스크립트는 싱글 스레드 방식이기에 하나의 스레드에서 모든 것을 돌려야 한다. 이를 보완하기 위해 비동기 통신이라는 개념이 등장했다. 여기서 잠시 비동기가 무엇인가 하면, 비동기란 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라..

유튜브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고, 쿠팡에서는 로그인을 해야 내 장바구니로 넘어갈 수 있다. 이러한 인가 과정에서 필수적 요소는 바로 token이다. ! 로그인 후 발생되는 token을 localStorage에 저장하고, 특정 사이트에서 필요할 때 서버에 보내는 것까지의 과정을 알아보자. 0. token, 왜 필요한가? HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다. 이러한 상황을 막기 위한 것이 token이다 ! 먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마..