react

useState useState는 상태를 관리해주는 hook이다. useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

Node.js는 javascript를 런타임으로 돌아가게 해주는 서버의 역할을 한다.https://nodejs.org/ko/이 사이트에 접속하여 가장 최신의 LTS 버전을 다운 받으면 된다.터미널 창을 열고 node -v을 입력하면 설치가 정상적으로 완료됬는지

useEffect를 사용하는 경우 처음에 렌더링 되었을 때 한번만 실행 되어야 하는데 두 번씩 호출 되는 문제를 겪었다.이 문제의 경우 검색해보니 create-react-app으로 프로젝트를 생성하는 경우 index.js에서 React.StrictMode로 App 컴포

useState는 상태를 관리해주는 hook이다.set 함수를 사용하면 React는 다음 상태를 저장하고 새 값으로 구성 요소를 다시 렌더링하고 UI를 업데이트 한다.그러나 set 함수를 호출해도 이미 실행 중인 코드의 현재 상태는 변경 되지 않는다.React에서 st

useEffect(setup,dependencies?)setup: Effect의 논리가 포함된 함수.dependencies: 코드 내부에서 참조되는 모든 반응 값 목록.useEffect는 구성 요소 또는 자체 Hooks의 최상위 수준에서만 호출할 수 있다.일부 외부 시

const cachedValue = useMemo(calculateValue, dependencies)useMemo는 계산 결과를 캐시할 수 있는 React Hook이다.calculateValue: 캐시하려는 값을 계산하는 함수. 인수를 사용하지 않아야 하며 모든 유형

react를 사용하다 보면 매우 많은 모듈을 사용하게 된다. 그런데 모듈을 설치 했음에도 모듈을 찾을 수 없다는 에러가 뜨는 경우가 종종 발생한다. 그 경우shell 창을 열어준 후을 실행 해 주면 문제가 해결된다.

모든 리액트 컴포넌트는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.라이프사이클은 마운트, 업데이트, 언마운트로 나뉜다.DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다.컴포넌트는

컴포넌트의 state 객체에 대한 업데이트를 실행. state가 변경되면, 컴포넌트는 리렌더링된다.props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리setState 호출은 비동기적으로 이루어진다. 따라서 항상 setState가 가장 최신의 state

렌더링 -> acceptTerms 즉시 호출 -> 리렌더링 -> acceptTerms 즉시 호출이 반복되어 무한 렌더 루프에 빠진다.그렇기에 이러한 방식으로 변경해준다.위의 useEffect의 경우 view가 변할 때 실행 되는데 useEffect가 실행되면 view값

액션상태에 어떠한 변화가 필요하면 액션이 발생.액션 객체는 다음과 같은 형식으로 이루어짐. 액션 객체는 type필드를 반드시 가지고 있어햐 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그리고 그 외의 값들은 나중에 상태 업데이트르 할 때 참고해야 할 값이며, 작성

리액트 프로잭트에 별도로 설정하지 않으면 코드가 모두 한 파일에 저장되어 버린다. 그렇게 되면 지금 당장 필요하지 않은 컴포넌트 정보도 모두 불러오면서 파일 크기가 매우 커진다. 그러면 로딩이 오래 걸리기 때문에 사용자 경험이 안 좋아지고 트래픽도 많이 나오게 된다.

useCallback은 리렌더링 간에 함수 정의를 캐시할 수 있는 React Hook이다.useCallback(fn,dependencies)fn: 캐시하려는 함수 값이다. 모든 인수를 취하고 모든 값을 반환할 수 있다. React는 초기 렌더링 중에 함수를 반환한다(호

React는 component 로 만들어진다. component는 고유한 논리와 모양이 있는 UI의 일부이다. React component는 마크업을 반환하는 javascript 함수이다.React component는 대문자로 시작해야 한다. 이를 통해 react co

component React를 사용하면마크업, CSS 및 JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 지정 "component" 로 결합할 수 있다. 컴포넌트 가져오기 및 내보내기 export default: export default의 경우 한 파

React를 사용하면 JSX에 이벤트 핸들러를 추가할 수 있다. 이벤트 핸들러는 클릭, 가리키기, 양식 입력에 초점 맞추기 등과 같은 사용자 상호 작용에 대한 응답으로 트리거 되는 자체 기능이다.이벤트 핸들러에 전달되는 함수는 호출되는 것이 아니라 전달되어야 한다.호출

component는 상호작용의 결과로 화면에 표시되는 내용을 변경해야 한다. React는 component의 메모리로써 state를 사용하여 이를 구현한다.지역변수는 렌더링 간에 유지되지 않는다.지역 변수를 변경해도 렌더링이 트리거되지 않는다. React는 새 데이터로

컴포넌트가 화면에 표시되기 전에 React에 의해 렌더링되어야 한다. UI를 요청하고 제공하는 이 프로세스에는 세 단계가 있다.1\. 렌더링 트리거2\. 구성 요소 렌더링3\. DOM에 커밋구성 요소를 렌더링하는 데는 두가지 이유가 있다1\. 구성 요소의 초기 렌더링2

state는 읽고 쓸 수 있는 일반 javascript 변수처럼 보일 수 있는데 state는 snapshot처럼 동작한다.클릭과 같은 사용자 이벤트에 대한 응답으로 사용자 인터페이스가 직접 변경된다고 생각할 수 있다. React에서는 이 모델과 약간 다르게 동작한다.

state를 설정하면 리렌더링을 대기열에 추가한다. 그러나 때로는 다음 렌더링을 대기시키기 전에 값에 대해 여러 작업을 수행해야 할 수도 있다. 이렇게 하려면 React가 상태 업데이트를 일괄 처리하는 방법을 이해해야한다.React는 상태 업데이트를 처리하기 전에 이벤

state는 객체를 포함하여 모든 종류의 JavaScript 값을 보유할 수 있다. 그러나 React state에 있는 객체를 직접 변경해서는 안 된다. 객체를 업데이트하려면 새 객체를 생성 해당 복사본을 사용하도록 state를 설정해야 한다.state에 넣은 모든 J

객체와 마찬가지로 state에 저장된 배열을 업데이트하려면 새 배열을 만들고 새 배열을 사용하도록 state를 설정해야 한다. 배열에 추가 배열 스프레드 구문을 사용하면 항목을 원본 앞에...artists 배치하여 앞에 추가할 수도 있다. 배열에서 제거 배열 변환

React는 UI를 조작하는 선언적 방법을 제공한다. UI의 개별 부분을 직접 조작하는 대신 구성 요소가 있을 수 있는 다양한 state를 설명하고 사용자 입력에 응답하여 state간에 전환한다.명령형 UI는 UI를 조작하기 위한 정확한 지침을 작성해야 한다. 각 요소

항상 두 개 이상의 state 변수를 동시에 업데이트하는 경우 단일 state변수로 병합하는 것이 좋다같이 업데이트 하는 경우 이러한 형태보다는 이러한 형태가 낫다여러 state가 모순되고 동의하지 않는 방식으로 state가 구조화 되면 실수할 여지가 생긴다.이렇게 하

state는 component 간에 독립적이다. React는 UI트리에서의 위치에 따라 어떤 state가 어떤 component에 속하는지 추적한다. state를 보존할 시기와 다시 렌더링 사이에 state를 재설정할 시기를 제어할 수 있다.DOM은 HTML 요소를 나

테스트란? 우리가 작성한 코드가 잘 작동하는지 검증하는 작업. 그러나 우리가 만든 프로젝트의 모든 기능을 사람이 수동으로 하나하나 확인하는 것은 정말 번거로운 일이다. 그래서 테스트 자동화 작업이 필요하다. 테스트 자동화의 이점 우리가 준비해놓은 상황에 대하여 자동으로

일부 구성 요소는 외부 시스템과 동기화해야 한다. 예를 들어 React 상태를 기반으로 비 React 구성 요소를 제어하거나 서버 연결을 설정하거나 구성 요소가 화면에 나타날 때 분석 로그를 보낼 수 있다. effect를 사용하면 렌더링 후 일부 코드를 실행할 수 있으

이 코드를 실행하는 경우 처음에 enabled가 false로 되어있기 때문에 처음 데이터를 패치해오는경우 리턴하는 값이 이렇게 바뀌기 때문에 input이 초기화 되어 input에 들어있던 value가 사라지게 된다. 그렇기에 이러한 경우이런식으로 구현해준다

Redux는 앱의 상태를 actions이라는 이벤트를 통해 관리하고 업데이트하는 패턴이자 라이브러리다.리덕스로 만들어진 패턴과 도구들은 변화가 발생했을 때 언제, 어디서, 왜, 어떻게 앱의 상태가 업데이트 되는지 로직이 어떻게 행동할지 이해하기 더 쉽게 만든다.앱의 여