Frontend 개발자 - hyo.loui

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 코드 구조 파악하기 이번 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..

❤️‍🔥TIL : Today I Learned 구조 분해 할당 - 자바스크립트 표현식 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. (출처: MDN) 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b..