고니의 개발 일지📚

프로젝트 하면서 useState()를 정말 많이 썼는데... 문득 드는 생각 아 let 대신 왜 state를 쓰는거였지? 저번에 정리한 포스팅 보충 설명할 겸, 이번에 확실히 개념도 정리할 겸 포스팅 합니다. ㅎ ▶ useState란? React Hooks에서 제공하는 함수입니다. 리액트에서 state란, 컴포넌트에서 변경될 수 있는 값을 말합니다. 함수형 컴포넌트에서 state를 변경하기 위해 사용하는 것이 useState() 함수 입니다. useState는 2개의 인자를 받을 수 있습니다. ▶ 사용법 useState(a, b) a => 상태 값이 저장되는 자리 b => 상태 값을 변경하는 함수의 자리 ES6에 새로 추가된 비구조화 할당을 사용하여 더욱 쉽게 이를 활용할 수 있습니다. const [ti..

지난번에 진행했던 마켓컬리 클론코딩 프로젝트를 배포해보려고 한다. 더미데이터를 쓰고 있으니 github-pages를 활용하여 배포해도 충분하겠다는 생각이 들어 당장 실시! 배포 전에 잠깐! 웹브라우저는 리액트의 문법을 이해할 수 없다... 따라서 JSX 파일을 HTML, CSS, JS로 변환해주어야 하는데, 이는 빌드를 통해 이루어진다! Github-pages를 이용하면 빌드+배포까지 편리하게 할 수 있다는 장점이 있다!😄 Github Pages란, GitHub의 리포지토리에서 직접 HTML, CSS 및 JavaScript 파일을 가져오고 선택적으로 빌드 프로세스를 통해 파일을 실행하고 웹 사이트를 게시하는 정적 사이트 호스팅 서비스이다. About GitHub Pages - GitHub Docs Abo..

프로젝트 진행 중... 스크랩 기능을 만들어야 했다. 어제 성공한 스크랩 기능은 얼핏 봐서는 완벽해보이지만... 팝업 창을 껐다 켜면 상태 유지 안됨...ㅎㅎㅎㅎㅎㅎ 어쩌지? 하다가 생각해낸 방법. 부모 컴포넌트에서 자식 컴포넌트를 관리하자! 컴포넌트 구조는 다음과 같다. Mentoring.js (부모 컴포넌트) MentorApply.js (자식 컴포넌트) 부모 컴포넌트 1. 북마크 상태를 관리할 boolean 타입 변수를 하나 만든다. 2. 변수의 상태를 바꿔줄 set 함수를 같이 설정한다. => 자연스럽게 useState를 쓰게 되겠죠? 3. 클릭했을 때 bmk의 상태를 바꾸기 위해 클릭 이벤트 함수도 만들어주자. 이제 이 bmk 값과 클릭 이벤트 함수를 자식에게 props로 전달해주면 된다. tog..

7월에 웹 교육을 들었던 멘토님의 강의를 다시 보면서 Weather API - OpenWeatherMap을 통해 지역을 입력하면 날씨를 확인할 수 있는 페이지를 만들어보았다. Weather API - OpenWeatherMap Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. op..

소스코드 import {useState} from 'react'; import { useEffect } from 'react/cjs/react.development'; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []) return ( The Coins! {loading ? "" ..

소스코드 import {useState} from 'react'; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === ""){ return; } setToDo(""); // state 직접 수정 하지 않음. 함수 사용 setToDos(currentArray => [toDo, ...currentArray]); }; return ( My To Dos {toDos.length..

실습 코드 import { useState, useEffect } from "react"; function Hello() { useEffect(() => { console.log("hi"); return () => console.log("bye"); }, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing(prev => !prev) return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } export default App;

노마드코더의 ReactJS로 영화 웹 서비스 만들기 강의 중 일부분을 듣고 정리한 내용입니다. 유용한 자바스크립트 문법 const food = ["tomato", "potato"] // 배열 선언 이때, "tomato", "potato"를 변수에 저장하고 싶을 때는 어떻게 해야할까요? const tomato = food[0]; const potato = food[1]; 와 같이 배열의 index를 이용해서 배열의 요소들을 저장할 수 있습니다. 그러나 자바스크립트에서는 이것보다 더 쉽고 유용한 방법이 있습니다! const [myFavFood, mySecondFood] = food; 이러한 표현을 사용하면, myFavFood => "tomato" mySecondFood => "potato" 가 저장이 됩니다..

index.html [니꼬쌤 코멘트] - 이 코드는 완전 perfect한 코드가 아님. *****React의 강점 : countUp()이 호출될 때 counter 변수가 증가하고 다시 render()를 호출하면, vanilla js의 경우 counter뿐만 아니라 div, span 태그까지 모두 리렌더링 함 React에서는 Countainer 컴포넌트를 전체를 리렌더링 하지만, 사실 HTML 코드에서는 counter(숫자)만 변화한다!!! 바뀐 부분을 리렌더링 할 경우, 전체를 전부 생성할 필요 없이 바뀐 부분만 새로 생성할 수 있도록 도와주기 때문에 굉장히 유용하다~~ 참고 : #3.1 setState part One – 노마드 코더 Nomad Coders All Courses – 노마드 코더 Noma..