맨땅에 헤딩

리액트에서 state를 사용하여 상태를 관리하는 이유를 리액트 공식문서를 기준으로 정리해보았다. 가장 큰 이유는 아래의 2가지이며, 그 외에 각 컴포넌트별로 private한 state관리라는 추가적인 특성을 아래에 +로 정리하였다. 🖥 React에서 state 사용이유 1. 지역변수는 렌더링 간에 유지되지 않아서 2. 지역변수변경은 렌더링을 발동시키지 않아서 state를 사용하지 않고 아래와 같은 방법으로 리액트에서 index라는 변수를 변화시키고자 한다면, UI에는 아무런 변화가 나타나지 않는다. import { sculptureList } from './data.js'; export default function Gallery() { let index = 0; function handleClick()..

useEffect를 이해하기 위해서는 리액트라이프 사이클에 대한 이해가 선행되어야한다. ➡️ useEffect를 정확하게 이해하기 위해서, 리액트 라이프사이클을 공부했다. useEffect를 공부하면서 다른 부분보다 제일 헷갈렸던 부분이 실행순서였다. 훅스의 라이프사이클뿐만 아니라 클래스형의 라이프사이클를 알면 이 부분이 조금 더 쉽게 이해가 된다. 이 글은 리액트 라이프사이클이란 무엇인가, useEffect는 어떤 실행순서로 진행되는가를 중점적으로 다룰 것이다. (useEffect를 이해하기 위해 공부한 것이기 때문에, 글은 클래스형보다는 useEffect훅에 더 초점이 맞춰질 것이다.) 🖥 리액트 라이프사이클이란? "생명주기 메서드" 컴포넌트가 생성, 업데이트, 소멸되는 과정을 단계적으로 관리하고 제..

🧷 정의 리액트 라우터(React Router)란? React 애플리케이션에서 클라이언트 측 라우팅을 구현하는 데 사용되는 라이브러리. 단일 페이지 애플리케이션(Single Page Application, SPA)을 개발할 때, 사용자가 다양한 URL로 이동하거나 페이지를 변경할 수 있도록 도와주는 라이브러리 (라우팅: 웹 애플리케이션에서 다른 페이지나 뷰로 사용자를 네비게이션하는 프로세스) 🧷원리와 주요기능 라우터를 정확하게 이해하기에 앞서, window.loacation에 대해 공부하였다. location과 URL에 대한 이해가 있다면 리액트 라우터에 대해서 더 이해가 잘 될 것이라고 생각한다. window.location ( Web API란? / pathname, search, hash ... ) ..

const fetchData = async () => { // 현재 상영중인 영화 정보를 가져오기 (여러영화) const request = await axios.get(requests.fetchNowPlaying); console.log(request); //0번째 영화의 id만 가져오기 const movieID = request.data.results[0].id; console.log(movieID); //0번째 영화의 상세정보 가져오기 const {data: movieDetail} = await axios.get(`movie/${movieID}`) console.log(movieDetail) }; axios는? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동..

🔍 onChange 이벤트 input요소의 onChange 이벤트는 입력필드의 값을 변경할때 발생하는 이벤트 이벤트핸들러 함수를 통해 입력된 값에 대한 처리를 한다. onChange 이벤트는 사용자가 입력필드에 값을 입력/삭제할때마다 발생하기 때문에 실시간으로 값을 업데이트하거나 다른 처리를 수행 ➡️ 사용자에게 좀 더 유연한 UI를 제공 🔍 형태 1️⃣ 사용하고 싶은 함수명을 바로 적어줘도 되고, 2️⃣ e 매개변수를 안에서 바로 사용도 가능하다. setUsername(event.target.value)} required /> 🔫 onChange 코드 좀 더 나은 코드로 🔫 여러개의 input이 있으면 각각의 useState와 또 각각의 onChange함수를 만들어줘서 코드가 길어지는 경향이 있었다. ..

🤔 Promise사용 코드 useEffect(() => { getBookData() .then((res) => setPosts(res.data.items)) .catch((err) => console.log(err)); }, []); ✅ async await으로 바꾼 코드 const getApi = async () => { try { const response = await getBookData(); const { data } = response; setPosts(data.items); } catch (e) { console.error(e); } }; useEffect(() => { getApi(); }, []); 💻 async/await 구문을 사용하여 getBookData()함수 호출 1️⃣ cons..

ChatGPT를 불러와서 내가 만들 프로젝트에서 적용을 해보았다. 내가 만든 사이트는 오늘 어떤 책을 읽을지 고민일때 한번에 찾아보기 쉽도록 만든 사이트이다. 각각의 가격 정보나 상세설명은 구글 API를 이용했고, 그 이상의 추천이나 질문은 chatGPT에게 질문을 해서 바로 답변을 받을 수 있도록 기능을 구현하였다. 이 과정에서 ChatGPT API를 불러오는 코드는 기억해두면 좋을것같아서 기록해둔다. 우선 당연히 기본적으로 OpenAI API 사이트에서 personal API키를 발급 받아야한다. 아래의 사이트에서 본인계정을 누르고 - View API KEYS - Create new Secret key 를 통해서 API 키를 발급받고 이것을 따로 저장해둔다. OpenAI API An API for a..

DOM (Document Object Model) Elements = html 하나하나의 요소 Document = 이 모든 요소들을 담고 있는 웹페이지 브라우저는 이 페이지에 해당하는 html을 분석해서 화면에 멋지게 띄어준다. DOM이란 이렇게 웹페이지에 들어있는 html element들을 트리형태구조로 표현한것. 가상돔 Virtual DOM 리액트는 가상돔을 사용하여 실제돔을 조작하는 일을 엄청나게 빠르게 해준다 가상돔 = 실제 돔과 같은 내용을 담고 있는 복사본 ( 이 복사본은 실제돔이 아닌 JS객체형태로 메모리안에 저장되어있다) 가상돔은 복사본이기 때문에 실제 돔안에 들어있는 모든 elements들과 속성들을 똑같이 가지고 있다 (하지만 가상돔은 실제돔과는 다르게 브라우저안에 있는 문서에 직접적으..

프로젝트 소개 쇼핑목록을 관리하는 메모장이다. 👉 배포사이트 보러가기 👉 깃허브보러가기 🖥 제작기간: 2일 (2023.3.21-3.22) 제작인원: 1명 (개인프로젝트) 기술스택: React, styled-components 추가 라이브러리: uuid, react-icons 배포: Netlify 1. 기능 ✅ 추가하기(create) -useState() : useState를 통해서 state관리 -name: 2개의 input에 각각 들어오는 것을 name을 통해서 한번에 관리 - uuid: 새롭게 create되는 값들의 key에 uuid를 통해서 고유한 값들을 부여 ✅ 읽기 (read) 컴포넌트: 재사용성이 높은 것들을 component화하여 불러옴 map(): item리스트들을 일일이 적는것이 아닌,..

전역적인 상태관리를 위해서 contextAPI와 useContext를 사용하였다. 필요없는 컴포넌트에까지 props drilling을 해줄때보다 가독성측면이나, 효율성, 유지보수 모두 뛰어나다. 하지만 필요한 페이지마다 import를 많이 해주는 나름의 단점(?)이 존재한다. 그래서 이것을 조금이라도 줄여보조자하는 방법을 적어보고자 한다. 어제 만들었던 다크모드의 리팩토링을 통해 useContext를 다른 방식으로도 사용해보겠다. //footer.js import React, { useContext } from "react"; import { ThemeContext } from "./ThemeContext"; export default function Footer() { const { isDark, se..