부모 컴포넌트에서 위도와 경도를 props로 전달하여 자식컴포넌트에서 카카오맵API를 통해 특정 장소를 호출하고 싶었으나 오류가 발생했다.

SPA는 Single Page Application의 약자로 한 번 웹 페이지를 로딩하면 사용자가 새로고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다.
이게 무슨 의미일까?

리액트가 궁금해 정적사이트를 하나 만들고 있다.
script를 정의하고 npm run start를 했는데 아래와 같은 오류가 발생했다.

리액트는 기본적으로 하나의 루트 컴포넌트(보통 App.js)에서 상태를 관리한다.
리액트의 컴포넌트가 많아지면 컴포넌트간의 교류가 빈번해진다. 중앙에 데이터 저장소를 만들고 관리하면 더 편하다. 그것이 바로 Redux이다.
리덕스의 데이터가 변경되면 관련된 모든 컴포넌트에 영향을 미친다.

리액트의 자잘한 팁을 정리해보았다.

자잘한 팁

• state에 객체 구조를 안쓰는 것이 좋다
• render안에는 절대 setState()를 쓰지않는다 → setState()되면 랜더링이 실행되기때문에 랜더링이 실행되면 또 setState()가 실행되고 이 부분이 무한 반복되기때문.
• 부모한테서 받은 props를 바꾸고싶을때는 useState()를 이용하여 state로 만들고 그 state를 바꿔준다 → 자식이 props를 바꾸면 부모 props도 바뀌기때문.
• Props는 상속이다. Props를 보면 항상 그 부모 컴포넌트를 생각해야한다. 그 부모 컴토넌트의 조상 컴포넌트가 있을 수 있다.

리액트를 클래스형 컴포넌트로 사용하게되면 계속 this.state를 써줘야하는 불편함이 있다.
이를 구조분해문법으로 해결할 수 있다.

상황

스프링부트와 리액트 MySQL를 사용하여 학사프로그램을 만들고 있다.
리액트 작업 도중 Warning: Failed prop type: The prop open is marked as required in ForwarRef(Menu), but its value is undefined 에러가 계속 발생했다.
Menu인 부분이 뭐있을까 검색하면서 찾아보니 정말 어이없는 실수를 발견했다.

React어플리케이션 성능향상 방법

React에서 state나 props가 변경되었을때 render가 진행되는데 값이 없는 setState() 호출에도 rendering이 된다.
이게 쌓이면 성능이 저하된다. 이를 해결하는 방법을 알아보자.

Hooks 컴포넌트 상태관리 함수

리액트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스 컴포넌트는 state를 가지고 다니는 반면에 함수형 컴포넌트는 그렇지않다.
리액트 Hooks를 통해 함수형 컴포넌트에서 상태관리를 할 수 있게 되었다.
즉, 리액트 Hooks란 함수형 컴포넌트에서 생명주기 관리를 도와주는 기능이다.

컴포넌트 라이프 사이클 순서는 아래와 같다.