사이드 프로젝트를 하던 도중에 어떤 페이지는 Header,Footer,Nav가 보여져야하고, 어떤 페이지에서는 안보여주는 방법을 찾아보고 있었습니다. 😱 각 필요한 페이지마다 Header, Footer, Nav를 보여주도록 하는것은 비효율적이라는 생각이 들어서 원하는

2일동안 나를 힘들게했던 오류와 내가 어떻게 그 오류를 해결했는지에 대해 작성해보려고한다. 나의 성격이 약간 이해안되는 부분 있으면 무조건 해결하고 가야하는.. 그런 성격이다. 어떤 성격인지 아시는 분들은 아실거다 😅 개발할때는 좋은 점..? 인것 같다.. 😅 실

오늘은 useEffect와 useLayoutEffect의 차이에 대해 공부해보려고 합니다. 일단 2가지 과정에 대해 알아야합니다. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표

history.push로 페이지를 넘기는 작업중이었다. 그런데 매번 잘되다가 가끔 어떤 경우에 history.push를 할때 에러가 생기는것을 발견했다. 일단 this.props를 찍어보았다. 엥?!! history객체가 없더라.. 보통 App.js 에서 Route로

이렇게 key를 가지고 있어서 앞에 요소가 추가가 되더라도, 2015,2016키를 가진 데이터는 이동만 하면되고, 2014키를 가진 데이터만 추가가 됩니다.key값은 데이터가 가진 고유값으로 설정해야합니다. 고유한 값(id)가 없다면 index를 사용할수 있습니다.컴포

1\. state가 변경될 때2\. 부모 컴포넌트가 리렌더링 될 때3\. props가 변경될 때4\. forceUpdate 함수가 실행될 때

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.9가지의 생명주기 메서드가 있습니다. 하나씩 살펴봅시다..!마운트될때 발생하는 생명주기 입니다.constructorgetDerivedStateFromPropsrendercomponentDidMoun

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터 이다.props는 읽기 전용이다. → 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 pro

컴포넌트를 작성하는 방법은 함수 컴포넌트와 클래스 컴포넌트가 있다.메모리자원도 클래스 컴포넌트 보다 덜 사용한다고 한다. → 그러나 성능은 실제로는 거의 비슷하다고 한다.함수 컴포넌트의 주요 단점이었던 state와 라이프사이클 API의 사용이 불가능하다는 것이었는데,

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다. const element = <h1>Hello, world!</h1>;JavaScript를 확장한 문법, 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. JSX로 작