Frontend 개발자 - hyo.loui

에러 내용 VM21:1 Warning: Cannot update a component (`App`) while rendering a different component (`TodoList`). To locate the bad setState() call inside `TodoList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at TodoList (http://localhost:3000/static/js/bundle.js:413:5) at div at App (http://localhost:3000/static/js/bundle.js:38:76) 에러 이유 : 컴포넌트에서 호출하고 있는 setSt..

리액트 이 녀석.... 간만에 휴먼에러를 만났다 아주 간단한 코드였고, 콘솔에 에러도 안나고, 문제 없을리가 없는데 의도한 children 이 나오지를 않았다... 도대체 왜!!! 도대체 뭐가 문제일까.. 한참을 고민하던 중 수많은 에러를 겪어 많은 내공이 쌓인 '에러개발자' 분께 질문했다 역시나 겪은 에러였고ㅋㅋㅋㅋㅋㅋㅋ 자동완성으로 children 의 앞글자가 대문자 Children 으로 들어온 문제였다.... 에라잇ㅠㅠ 🎈해결 방법 : { Children } => { children } 대문자 없이 소문자로! dram26 (박다영) - velog dram26 (박다영) - velog WIL_나는 할 수 있다는 용기 투두리스트 껌이라고 생각했는데, 그거하나 제대로 못해내는 자괴감 하지만 계속해서 반복..

useEffect useState와 같이 리액트에서 제공하는 hook 이기 때문에 import를 해야 사용이 가능하다 핵심기능 : component가 렌더링 될 때 바로 실행이 된다 동작 방식 : 화면에 컴포넌트가 보여졌거나 사라졌을때 무언가를 실행한다. 정확히는 component가 화면에 mount, unmount 되었을 때 실행이 된다. (react lifecycle) 의존성 배열이 없는 상태라면 value 가 바뀔 때 마다 (input에 타이핑하여 onChange가 일어날 때) 실행되지 않는다 하지만 여기서 배열에 value 를 넣어주면 전과 같이 value가 바뀔 때 마다 콘솔에 'hello useEffect' 가 출력된다

useState 동작 방식 1. 일반 업데이트 방식 onClick 을 실행했을 때 setNumber가 각각 4번 실행하지 않고, batch 처리되어 1회만 실행함 리액트에서는 명령을 하나로 모아 최종적으로 1회만 실행 => 버튼 누를 때마다 0, 1, 2, 3, 4... 2. 함수형 업데이트 방식 명령을 모아 순차적으로 각각 한번씩 실행 시킴, setNumber가 4번 함수형으로 실행되어 최종적으로 4회를 실행 시킴 => 버튼 누를 때마다 0, 4, 8, 12, 16... == useState 로 원시데이터가 아닌 데이터를 변경해야 할 때는 불변성을 유지해야 함

❤️‍🔥TIL : Today I Learned 모던 자바스크립트 스터디 주제 : 모듈 리액트 사용, 여러 js를 묶어놓은 index.js 등을 html 파일에 연결시킬 때 script 태그 안에 작성하는 속성으로 타입을 모듈로 작성해준다 type="module" 모듈은 파일의 크기가 커지면 커질수록 사용 가능성이 높으며 프로젝트 간 필수적으로 사용 할 수밖에 없는 기능이다 모듈 타입은 기본값으로 defer 속성이 있다 즉, html 요소가 모두 파싱이 된 이후 script를 실행한다 여기서 defer와 async 의 차이점이 궁금해져 공부했다. 공통점 : 스크립트를 다운로드하는동안 HTML 이 중단되지 않음 defer : html 다 다운받고 나서 dom 조작 가능 할수 있도록! script 가 html..

❤️‍🔥WIL: Weekly I Learned 이번 주 한 일 티스토리 포스팅 = 매일 TIL 일지 (50개 달성) 리액트 미니 프로젝트 - Todo-list-app 완성 리액트 기초강의 수강 - 완료 리액트 심화강의 수강 - 진행중 Project review 프로젝트는 내 실력이 얼마나 늘었는지, 이해 못한 부분이 어느부분인지를 판단하는 좋은 척도가 될 수 있다. 물론 쉽지 않다, 그런데 완성 후의 느낌은 지금까지 느낀 전율과는 전혀 다른 도파민이 나온다. 뭐랄까 내가 만들어낸 창작물이다 라는 생소한 느낌? 이번 미니 프로젝트는 시간적으로 너무 촉박했다 예비군 동원 훈련으로 인해 캠프 결석이 발생했고, 부랴부랴 진도, 과제를 따라가느라 완성도 높은 작업이 이루어지지 못했다😢 프로젝트 리뷰에서 다른 수강..

❤️‍🔥TIL : Today I Learned 코드 구조 파악하기 이번 react-todo-list 과제를 진행 하면서 참조했던 repository를 활용하여 코드 구조를 파악하면서 다시한번 component, props, state 의 개념에 대해서 설명한다. 참조 - https://github.com/su-no/react-todo-list App.jsx 와 todo.jsx 코드를 보며 설명 하겠다 App.jsx + component 파일의 확장명은 js 로 사용해도 되고 jsx 로 사용해도 된다. 하지만 React에 쓰이는 파일이라는 것을 조금 더 명시적으로 표현하기 위해 jsx 를 많이 사용한다. import { useState } from 'react'; // useState 사용 import {..

❤️‍🔥TIL : Today I Learned Component : 컴포넌트 - 컴포넌트는 UI를 재사용이 가능하도록 개별적인 여러 조각으로 나눈다. - 컴포넌트는 개념적으로 'JavaScripts - 함수'와 유사하다. 'props'라는 입력을 받아, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. - Element는 일번 객체(plan object)로 React 앱의 가장 작은 단위이며, 컴포넌트의 '구성 요소' 다 - 컴포넌트를 선언하는 방식에는 우리가 주로 사용하는 함수형 컴포넌트, 클래스형 컴포넌트가 있다. 함수형 컴포넌트 : function component function isComponentName(props) { let javascriptArea; return JS..