노마드코더 영화 웹 서비스를 만들다가 리액트 렌더링이 두 번씩 발생하는 것을 발견하였다. 렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다. npx create-react-app 으로 생성하면 자동 설정이 되있습니다. 따라서 index.js 에서 이 Wrapper를 제거해주면 컴포넌트가 두번씩 호출되지 않습니다. ReactDOM.render( ); StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. 리액트 공식문서 StrictMode는 아래와 같은 부분에..

첫번째, React JS로 만들어진 웹사이트가 많다. 신기술을 배울 때 중요한 것은 누가 이 기술을 사용하는지, 그들의 규모가 얼마나 큰지, 이 기술이 그들에게 얼마나 중요한 지 꼭 살펴봐야 한다. 상위 1만 개의 웹 사이트 중 44.76%는 React.js 사용한다. 에어비앤비, 인스타그램, 페이스북, 넷플릭스와 같은 큰 회사들이 React를 사용한다. 그럼 React JS가 그들에게 얼마나 중요할까? 넷플릭스 웹사이트가 넷플릭스에게 얼마나 중요할까? 페이스북 웹사이트가 페이스북에게 얼마나 중요할까? 당연히 매우 중요하다. 그러므로 그들에게 React JS는 매우 중요하다!! 위를 토대로, 이런 거대한 회사에서는 안정적이고, 작동하는 것을 선택해야 한다. 만약 이런 사람들이 사용하는 library나 f..

Context API ✨ 전역 상태 관리 전역적으로 관리되고 있는 상태 값에 접근하여 사용할 수 있는 것 🤔 전역 상태 관리는 언제 필요할까? 로그인한 유저 정보 Theme style 이 밖에도 웹 어플리케이션을 개발하다보면 전역 상태로 관리해야 하는 값들이 꽤 많이 생긴다. 이제 전역 상태 관리는 잠시 잊고 props에 대해 생각해보자. App이라는 최상위 컴포넌트가 있고 그 아래로 A, B, C, D 컴포넌트(children)가 있다. D가 그려야 하는 정보를 A 컴포넌트가 가지고 있다고 가정해보자. props는 어떤 데이터를 하위 요소에 전달할 수 있는 좋은 방법 중 하나이다. 그러나 props의 한계는 바로 위 요소인 C 요소에게 props를 전달 받을 수 밖에 없다. A 컴포넌트가 가지고 있는 ..

제로베이스 예제 코드를 복사해서 npm start를 했을 때, 아래와 같은 오류가 발생했다. 이런 오류를 해결하는 방법을 포스팅 하려고 한다. 문제점 package.json 을 살펴보면 다음과 같은 예시의 스크립트를 볼 수 있는데, 이때문에 react-scripts 명령어가 실행되는걸 볼 수 있다. package.json npm "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 해결 방법 1) 제 프로젝트에 react-scripts 설치하기 - npm npm install -save react-script..

비동기 프로그래밍과 Promise async await fetch API axios useEffect 내에서 API 호출 시, 주의할 점 useEffect에서 첫번째 인자로 함수를 받는다. useEffect(() => { async function fetchData(){ const result = await axios.get( "https://jsonplacceholder.typicode.com/posts" ); console.log(result); console.log(result.data); return result.data; } fetchData().then((res) => { setDocs(res); }); }, []); 별도로 async 함수를 만들고 그 함수를 호출하는 방식으로 함수를 만들었다..

컴포넌트 반복하기 리액트 코드를 짜다보면 컴포넌트를 반복해서 보여주어야 하는 일이 굉장히 많다. 아래의 예시를 보자. 웹툰마다 같은 디자인의 컴포넌트가 반복해서 보여지고 있다. 그렇다면, 하나의 컴포넌트로 구현할 수 있다. 이러한 컴포넌트를 앞으로 PreviewCard라고 부르겠다. 그렇다면 PreviewCard 컴포넌트를 렌더링하는 부모 컴포넌트의 코드를 잠시 떠올려보자. export default function PreviewCardParent(){ return( ) } 여기서 좀 더 많은 PreviewCard를 보여주자! 라는 요구사항이 발생한다면 어떻게 할 수 있을까? PreviewCard를 하나하나 렌더링 하지 말고, 서버에서 내려주는 정보의 개수만큼 렌더링을 해보자. ➡ Array.protot..

Lifecycle 개념 Lifecycle (생명주기) 여기에 Clock 컴포넌트가 하나 있다. import React, { useState } from "react"; export default function Clock() { const [date, setDate] = useState(new Date()); return ( Hello, world! It is {date.toLocalTimeString()}. ) } 결과는 다음과 같다. 이 컴포넌트가 렌더링 되는 순간의 시간이 화면에 보여지게 된다. 이 말은 즉, 시간이 흘러도 화면의 시간은 멈춰있다. 그래서, 화면에 보여지는 시간을 1초마다 업데이트 해주고 싶다! ➡ 1초 마다 setDate(new Date())를 실행해서 화면을 업데이트 해주자! j..

state가 필요한 이유 함수 컴포넌트는 함수이다. 함수 컴포넌트에서 내부적으로 상태를 관리해야 하는 일이 필요하다. 아래 예시 코드를 보자 import React from 'react'; function Counter() { let count = 0; return ( (count += 1)}>+1 Counter: {count} ); } button을 클릭할 때 count 변수의 값이 증가하고 출력하는 컴포넌트이다. 하지만 button을 클릭해도 증가하는 count 변수의 값이 출력되지 않는다. (초기값 0으로 그대로 변하지 않음) = 컴포넌트가 초기에 렌더링을 실행하고 변수의 값이 바뀐 뒤로 렌더링이 되지 않는다. ➡ state가 필요한 이유! useState() hook 컴포넌트가 상태를 관리한다는 ..