✅ 들어가며javascript deep dive를 읽으며 js코어 개념을 익히곤했다.그러나 나는 이 개념이 실제 어떻게 실무에서 쓰이고 있는지, 또 어떻게 활용을 해야하는지 늘 의문이였다.특히 클로저는 변수를 은닉화 할 때 쓴다고 하는데, 은닉을 활용하면 더 코드를 파악하기 힘들지 않을까란 의문이 있었고 이걸 활용하게 될 날이 올까란 생각도 있었다. 그런데 이미 리액트 useState가 클로저를 활용한 개념이라고 한다!아래 글은 JSConf 의 useState관련 영상을 보며 공부한 내용이다.(※ 영상) ✅ useState와 클로저1️⃣ 클로저란 무엇인가?클로저(Closure)는 내부함수가 외부 함수의 변수에 접근할 수 있도록 해주는 JavaScript 기능이다.클로져를 통해 함수가 “privte”한 변..
프론트엔드/React
React에서 input 요소를 사용할 때 value와 defaultValue는 어떤 차이가 있을지 의문이 들었다.단순히 보기엔, defaultValue는 초기값 설정해주는 것 같은데 이런건 또 언제 써야하는걸까? 찾아보니 이 둘의 차이는 Controlled Component(제어 컴포넌트) 와 Uncontrolled Component(비제어 컴포넌트) 라는 것과 관련된 것 이였다.이건 또 뭐지! 이 두 방식의 차이에 대해 살펴보자. 리액트에서 input과 같은 폼 요소를 다룰때,Controlled 컴포넌트는 value에 state를 넣어 상태를 관리한다. 상태가 업데이트될 때마다 폼 전체가 리렌더링된다.Uncontrolled 컴포넌트는 defaultValue로 값을 설정하고, ref를 사용해 DOM에 ..
리액트의 내부 동작을 깊이 이해하기 위해 직접 리액트를 구현해보는 튜토리얼을 진행했다. 지금보면 코드가 눈에 다 들어와서 별로 복잡해보이진 않지만, 처음에는 코드를 이해하는게 힘들었다.링크드 리스트처럼 노드마다 부모, 자식, 형제로 얼키설키 엮여 있는 구조와Fiber 노드 객체의 속성과 뎁스가 너무 많아 코드를 파악하기 어려웠다.이런 문제를 해결하기 위해 각 노드 객체의 관계를 그림으로 직접 그려보며 구조를 하나씩 이해해나갔다.튜토리얼 사이트 전체코드 튜토리얼을 통해 파악한 주요 개념들을 정리해보았다. 1. Fiber란?1) 정의Fiber는 각 DOM 노드(element)마다 생성되는 객체로, Fiber Tree를 구성하는 작업 단위이다.Fiber Tree는 렌더링 프로세스를 관리하기 위한 구조인데, 이..
✅ 동일한 setState 함수를 ”setState(value) 형태로” 여러번 호출한다면?맨 마지막 업데이트된 state로만 반영됨.value = 6 , 12 , 18… 이 아닌, 3, 6, 9가 됨.const InputPrac = () => { const [value, setValue] = useState(0); // value = 3 6 9 ... const addNum = (e) => { setValue(value + 1); setValue(value + 2); setValue(value + 3); }; return ( {value} 클릭 );};export default InputPrac;설명리액트는 setState가 호출되면 state가..
useMemo계산 비용이 높은 연산 결과 "값"을 메모이제이션 함.해당 값이 변경되지 않는 한 다시 계산하지 않아, 렌더링 중에 불필요한 계산을 방지함탑레벨에서 한번 호출되야 함. (hook은 무조건 한번은 호출되야 해서)형태 const memoizedValue = useMemo(() => { return computeExpensiveValue(a, b); // 계산 비용이 높은 연산 또는 값}, [a, b]); 사용 : 복잡한 계산 처럼 비용이 높은 연산을 피하고 싶을때 사용함. ✅ calculateValue- 초기 렌더시 한번 호출됨- 순수 함수여야 함- 인자를 받지 않음 ( useMemo( ( ) => ), []);- 캐시하길 원하는 값을 계산하는 함수- 캐시하길 원하는 값을 반환해야 함..
6.4버전의 라우터를 쓰면 data Apis 기능을 사용할 수 있다. createBrowserRouter createMemoryRouter createHashRouter createStaticRouter 이 라우터는 data Apis 사용X 1. createBrowerRouter 모든 리액트 웹 프로젝트에서 권장되는 라우터임 History API를 사용해서 히스토리 스택을 관리할 수 있음 리액트 트리 외부에 라우터를 만들어야 됨 : component fetching and render fetchchains (https://remix.run/blog/remixing-react-router#component-fetching-and-render-fetch-chains) import React from 'rea..
공식문서 : https://styled-components.com/ vue styled-component: https://github.com/styled-components/vue-styled-components 1. 기본 사용법 - 컴포넌트를 생성하는 동시에 스타일을 정의할 수 있음 import styled from "styled-components" const Father = styled.div` display: flex; color: royalblue; ` function App() { return( 1 2 ) } 2. prop : styled-component 템플릿 리터럴의 함수에서 props를 받을 수 있다. import styled from "styled-components" const Fa..
✅ router-link spa 구현 가능: 브라우저를 새로고침 하지 않고도 다른 페이지로 이동됨.: 주소 이동시 페이지 전체를 새로 로드하는게 아니라, 가상돔을 통해 바뀐 부분을 확인해서 그 부분만 서버로부터 받아와 리렌더링 하게 된다.사용: app 내부 페이지 간의 전환을 관리하는데 사용하는게 좋음구현 예제: 처음 렌더시에 html,css,js파일을 다 다운한 뒤 '/list' 페이지로 바뀌었을 땐 다른 부분만 새로 받아와 렌더해준다. ✅ a 태그spa 구현 불가: 주소가 이동되면 페이지 전체를 다시 불러와서 처음부터 다시 렌더링 해야한다.사용: 외부 URL로 이동시 사용하는게 좋음 구현 예제: 처음 렌더시에 html,css,js파일을 다 다운, '/test' 페이지로 바뀌었을 때도 아예 새로 ht..
