프로그래밍 언어/React 기초

https://www.udemy.com/course/clean-code-react/udemy의 '클린코드 리액트' 강의를 듣고 정리했습니다.    State 컴포넌트 상태, 전역 상태, 서버 상태와 이를 관리하기 위한 행동들이 있다. 상태란 사물, 현상이 놓여있는 모양이나 형편을 뜻하며, 예시로는 '무방비 상태', '건강상태', '기차가 끊긴 상태' 등등이 있다.  상태는 언제 바꾸는지, 최적화는 언제 해야 할지, 불변성은 왜 필요할지 등을 고민해봐야 한다.     올바른 초기 값 설정초기 값가장 먼저 렌더링 될 때 순간적으로 보일 수 있는 값당연히 초기에 렌더링 되는 값.   초기값을 지키지 않을 경우렌더링 이슈, 무한 루프, 타입 불일치로 의도치 않은 동작으로 런타임 에러가 생길 수 있다.넣지 않으면..

이번 프로젝트에서 사용할 URL 복사 기능을 구현해 볼 것입니다. 우선 '공유' 버튼을 눌렀을 때 띄울 모달창을 먼저 만들었습니다. '주소' 부분에 해당 페이지의 URL이 출력되게 하고, '복사'버튼을 눌렀을 때 URL이 복사되게 해야 합니다. 이를 위해서는 우선 해당페이지의 URL을 먼저 알아와야 합니다. 이를 위해 useLocation을 사용합니다. useLocation()은 현재 경로와 관련된 정보를 담고 있는 객체를 반합니다. 이 친구가 담고 있는 내용 중 pathname은 현재 url의 경로 부분을 나타내는 문자열입니다. 현재 로컬 주소를 baseUrl 변수로 저장하고 location 훅에서 가져온 경로를 pathUrl 변수로 저장합니다. 이후 출력해 보면 현재 페이지의 주소가 잘 나오는 것을 ..

리액트 API 호출 API(Application Programming Interface) 서로 다른 프로그램이 데이터를 주고받을 수 있도록 도와주는 인터페이스(매개체)이며, 일종의 규약이다. [프로그램 A 프로그램 B] 데이터를 주고받음 서로 다른 프로그램끼리 데이터를 주고받으려면, 당연히 서로 어떻게 통신하고, 어떤 데이터를 주고받을 것인지 미리 합의된 규약이 존재할 것이다. 프로그램 간 데이터를 주고받는 과정에서도 미리 합의된 규약이 존재해야 한다 그것이 API 두 프로그램이 서로 데이터를 주고받기 위해 소통할 때, 어떤 방식으로 서로 주고받을지 합의해서 매개체 역할을 해주는 일종의 규약 REST API란 웹 서비스를 개발할 때 가장 범용적으로 사용되는 API이다. HTTP 프로토콜을 기반으로 동작한..

React Router 라이브러리 설치 https://reactrouter.com/en/main Home v6.20.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 리액트 라우터 공식 사이트이다 npm install react-router-dom 위의 명령어를 통해 리액트 라우터를 설치한다 package.json을 확인해 보면 설치가 잘 됐음을 확인..

메인페이지인 App 컴포넌트와 모달창으로 사용될 Modal 컴포넌트를 사용할 것이다. click State를 기본값을 false로 설정한다. 그리고 한 번 클릭할 때마다 click 값이 변하게 하는 onClickHandler를 만든다. 그리고 '클릭' 버튼의 onClick 이벤트에 적용해 주면 된다. '클릭' 버튼을 누를 때마다 click State 값이 변할 것이고, 이에 따라 모달창의 렌더링 여부가 결정될 것이다. 이를 위해 삼항연산자를 통해 click값에 따라 다르게 렌더링 되도록 했다. click이 true일 때 렌더링되는 Modal 컴포넌트를 살펴보자 특별한 내용은 없고, 부모컴포넌트로부터 onClickHandler를 물려받아서 ‘닫기’ 버튼에 적용시킨다. 모달창은 부모 컴포넌트 기준으로 한가운..

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API https://aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/ 위의 두 개 사이트를 참고하며 드래그 앤 드롭을 정리했다. https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기 HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이..