대범하게

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..