도리쓰에러쓰

1. useContext()란? 보통 부모 Component에서 자식 Component로 props를 통해 데이터를 전달하는데, 그 깊이가 깊어진다면 거쳐가야 하는 Component도 많아진다. 그렇게 된다면 코드를 반복적으로 작성해야 하는 일도 많아지고, 변수명이 바뀌면 거쳐가는 모든 Component에서 변수명을 수정해야 하는 등 비효율적인 문제가 발생한다. 이런 비효율적인 문제를 해결하는데에 Context가 꽤나 유용하다. Context를 사용하면 전역적으로 데이터를 공유하기 때문에 데이터가 필요한 Component에서 바로 사용이 가능하게 된다. React Hook인 useContext()는 Context를 좀 더 편하게 사용할 수 있게하는데, 우선 Context API의 개념에 대해 알아보도록 ..

1. Ref란? React에서 DOM에 직접 접근하기 위해 사용한다. HTML로 예를 들자면, 에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다. HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, React에서도 DOM 요소에 직접 접근하기 위해 사용하는 것이 Ref이다. 2. Ref 사용하기 아래 예제는 "활성화" 버튼을 클릭하면 비활성화(disabled) 되어 있던 input이 활성화되고, "초기화"버튼을 클릭하면 원래의 상태로 input을 비활성화 되는 Element를 제어하는 코드이다. import { useRef } from "react"; const Field = () => { const inputRef = useRef(null); const focus..

React에서는 Form을 다루는 2가지 방법이 있는데, 바로 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)이다. 과연 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 무엇인지 지금부터 알아보도록 하자. 1. 제어 컴포넌트(Controlled Component) 💡 React 공식 문서에서 제어 컴포넌트(Controlled Component)에 대한 설명은 다음과 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의..

이번에 개인 프로젝트를 공공데이터포털에서 제공하고 있는 Open API를 기반으로 만들려고 한다. 아래 공공데이터포털 사이트에 가입하여 원하는 API에 대해 활용신청을 하면 된다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr React 프로젝트 기본 세팅은 아래와 같다. 🔶 프로젝트 기본 세팅 1. 터미널에 npx create-react-app 프로젝트명 입력하여 프로젝트 생성 2. 터미널에 npm install add axios 입력하여 axios 라이브러리 설치 3. App.js에 axios 라이브러리 impo..

React에서 public 안에 있는 이미지폴더를 찾아가려는데 경로를 찾을 수 없다는 에러가 나왔다. 경로에 맞게 작성한줄 알았는데 알고보니 public폴더를 사용하려면 공식적인 방법이 있었다. 1. HTML : %PUBLIC_URL% 2. JavaScript : process.env.PUBLIC_URL 나는 JavaScript 코드에 설정했는데 아래 코드처럼 작성하였더니 이미지가 출력되었다. 이외에도 찾고 싶은게 있다면 아래의 공식 Document를 확인해보는 것이 좋을 것 같다. Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-..

src 폴더에 이미지를 저장하고 태그로 적용하려고 했더니 적용이 안되서 방법을 찾아봤는데, src 폴더에 저장하면 상대경로로 바로 접근할 수 없다는 것을 알게 되었습니다. 그래서 아래와 같은 방법으로 [public] 폴더 안에 'images' 폴더를 넣었더니 이미지가 적용되는 것을 확인할 수 있었습니다. public 폴더에 저장하여 상대경로로 잡기 public 폴더 안에 [images] 폴더를 생성하여 안에 이미지 파일을 넣었습니다. 태그 안에 이미지 주소를 상대경로로 잡아 작성하였습니다.