개발 성장 일ブl

useEffect란🤔리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 HookuseEffect가 속한 컴포넌트가 화면에 렌더링된 이후 실행callback함수를 받음useEffect 실행렌더링 될때마다 매번 실행useEffect(()=>{ //작업...});랜더링된후 단 한번만 실행useEffect(()=>{ //작업...},[]);마운팅 + 의존성배열 값이 바뀔때마다 useEffect를 실행useEffect(()=>{ // 작업...}, [의존성배열]);컴포넌트 라이프 사이클리액트 컴포넌트도 태어나고(mount), 업데이트되고(Update), 죽는(unMount) 생애주기가 존재

useState란🤔가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖음const [state, setState] = useState(initialState);state는 변수, setState는 state값을 수정하는 함수 state를 업데이트 하는 방법은 두가지가 있음// 기존에 사용하던 방식setState(number + 1);setState(number + 1);setState(number + 1); // + 3이 아니라 +1만 처리됨// 함수형 업데이트 setState((previousState) => previousState + 1);setState((previousState) => previousState + 1);setState((previousState) => previou..

프로젝트 개요🎬이번 프로젝트는 올림픽 메달 집계 사이트로, 입력한 나라명과 메달을 보여주는 리스트로 구현했다.사용자는 입력한 데이터를, 원하는 정렬기준에 맞게 볼 수 있다.기술 스택🧷프론트엔드 : React개발과정🎈아이디어 구상리액트 기본지식을 바탕으로 데이터를 CRUD한 사이트를 구상하게 되었다.구현입력한 나라명, 메달갯수를 리스트로 보여줌정렬을 사용자가 select하여 내림차순으로 리스트가 업데이트됨작성한 리스트를 삭제 가능위에 구현한 기능들을 로컬 스토리지에 관리하여 웹이 리랜더링되어도 동일하게 보여줄 수 있게 함테스트 및 배포리팩토링하다가 발견한 에러들 해결github에 배포배운점🤖기술적 성장: useState로 상태관리, useEffect로 생애주기 관리, 리액트의 기본적인 흐름을 이해문..

Boilerplate 개발에 필요한 기본 구조와 설정이 포함된 코드 집합, 템플릿useState상태(state)가 바뀌면 다시 렌더링한다! (상태변경 → 리렌더링 → 화면 변경)함수는 기본적으로 실행이 끝나면 메모리를 유지하지 못하는데,함수 컴포넌트는 이 점을 보완하기 위해 실행(렌더링)이 되더라도 상태(state) 유지 및 관리를 하기 위한 특별한 기능이 필요!=> useState 를 사용하면 리렌더링이 되더라도 상태를 기억하고 관리할 수 있음! form태그 onSubmit하면 화면이 새로고침되므로 e.preventDefault

1. 정렬현재는 금메달갯수를 기준으로 정렬했는데, 사용자가 select태그의 option을 클릭한 값에 따라 정렬가능하게 구현하게씀!먼저 구조부터 짰는데 이때 리액트에서 예상치 못한 오류가! gold ... option태그에 selected를 넣으면 아래와 같이 오류가 뜬다👻오류내용에 해답이 있듯이 `defaultValue` or `value`을 쓰면 됨!그래서 defaultValue로 바꾸면 에러해결💫 1-1. 정렬할 필터값들을 배열로 저장한다음 map으로 뿌리기const filterList = ["gold", "silver", "bronze", "total"]; {filterList.map((item, i) => ( {item} ))} 1-2. 그리고 선택..

이번 프로젝트는 드디어 리액트로! 익숙하던 CRA대신 vite로 셋팅👀1. 입력창먼저 입력하는 부분을 map으로 돌리기!const formArrName = ["country", "gold", "silver", "bronze"];return ( ... {formArrName.map((name, i) => ( {name} ))} ) 2. 입력한 데이터 뿌리기그리고 입력한 데이터를 담을 useState 하나,데이터들을 저장할 useState 하나 만든후const [inputValues, setInputValues] = useState({ // 입력한 데이터를 담음 country: "", ..

리액트에서 랜더링이란🤔컴포넌트의 UI를 화면에 표시하는 과정 랜더링 트리거🕸️컴포넌트가 다시 랜더링되도록 만드는 원인랜더링되는 경우👀1. 처음 리액트 앱을 실행했을때2. 현재 컴포넌트 내부의 state가 변경됐을때3. 현재 컴포넌트에 새로운 props가 들어올때4. 상위 부모 컴포넌트에서 위에 2,3번 이유로 랜더링이 발생했을 때 브라우저 랜더링 vs 리액트 랜더링브라우저의 랜더링과 리액트의 랜더링은 다른 프로세스임!브라우저의 랜더링전체 웹 페이지를 처리하는 과정이며, 실제 DOM을 사용리액트의 랜더링가상 DOM을 사용하여 상태 변화에 따른 UI 업데이트를 효율적으로 처리하는 과정DOM vs 가상 DOM (Virtual DOM)DOM브라우저는 실제 DOM을 사용하여 페이지를 렌더링사용자가 페이지를 ..

리액트에서 컴포넌트는 중요한 개념🌟개념적으로 컴포넌트는 javascript 함수와 유사! props라는 input을 받아서 react 앨리먼트라는 output을 반환 🔸리액트 컴포넌트 표현방법1. 함수형 컨포넌트(권장)// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼트를 return!function Welcome(props) { return Hello, {props.name};}// 위와 같음function App () { return hello}2. 클래스형 컴포넌트(구식)class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}컴포넌트 네이밍📛대문자로..

리액트를 하다가 너무 기본적인 문법이 헷갈렸다...예시로, onClick={handleClick} vs onClick={handleClick()} 함수 참조onClick={handleClick}버튼을 클릭할 때 실행할 함수를 넘기는 것쉽게하면, 이 함수는 나중에 필요할 때 사용할 거야~소괄호 없이 써야 버튼을 누를 때만 실행되도록 할 수 있음!함수 호출onClick={handleClick()}버튼을 클릭하기도 전에 실행하라는 것쉽게하면, 이 함수를 지금 바로 실행하라! function handleClick() { console.log("Button clicked!");}// 올바른 사용Click Me// 잘못된 사용Click Me // 즉시 실행돼버림

리액트 공식문서에서는 리액트를 다음과 같이 소개했다. The library for web and native user interfaces  여기서 라이브러리란🤔공통 기능의 모듈화가 이루어진 프로그램의 집합!"개발자"가 "필요한 기능만"을 골라서 사용가능vs 프레임워크란애플리케이션을 개발하기 위한 구조와 규칙을 제공하는 플랫폼"프레임워크"에 맞춰 코드를 작성해야 함🚫 리액트가 라이브러리인 이유: 개발자가 애플리케이션의 흐름과 구조를 완전히 제어가능, 전체적인 애플리케이션 아키텍처를 제어하려고 안함 리액트는 SPA로 설계*SPA : Single Page  Application의 약자로, 하나의 html 페이지로 이루어진 애플리케이션을 의미 그럼 어떻게 하나의 페이지로 여러 웹 서비스를 이용하는 걸까❓바로..