전체 글

📑 개요리코일은 프로젝트를 하며 많이 사용했는데...아무래도 리덕스에 비해 사용법이 쉬워서 짧은 시간 진행하는 프로젝트에 적용하기가 쉽다보니까.흠 하지만 실무에서도 리코일을 적용할 수 있는가는 의문이었다.차근차근 알아가며 고민해보자        🗂 Recoil이란?2020년 Meta에서 발표한 라이브러리로 React의 상태관리를 돕는다.Atom과 Seclector만으로 간단히 사용이 가능하며 리액트의 규칙(선언적 UI, 컴포넌트 중심 설계, Hooks)을 따르기 때문에 기존 React 개발자들에게 친숙하다.  - Recoil이어야 하는 이유React의 useState Hook으로도 State 컴포넌트의 구축은 가능하나, 서비스 규모가 커지고 컴포넌트 간 관계가 복잡해질 때 상태를 효율적으로 관리하기 ..

📑 개요일단... 이걸 모르고 폼 구현을 했던 나에게 깊은 애도를...............😂이거 진짜 쓰나? 하고 포스팅 작성하기 전에 플로우 구상하고자 참고할 글들 스윽 읽어보는데이걸 왜 안썼지 하고 글 읽는 내내 그냥 헛웃음 쳤다 ㅋㅋㅋㅋㅋㅋ그치만... 그치만 같이 프젝했던 아이들 모두 hook form은 몰랐다구요~!!!!🥲일단 state 나열이 없다는 것 부터가 너무나 매력적......^-^발전하렴 과거의 나.......        🗃️ React Hook Form이란?Form을 더 간편하게 사용하기 위해 고안된 라이브러리이다.사용 시 폼 상태를 관리하고 유효성을 검증하는 작업이 간편해지고, 성능 최적화에 유리하다. - React hook Form의 특징비제어 컴포넌트state의 최소화..

근데 적다보면 개인적인 만족감... 아쉬움...그런 게 있어서 포스팅하고 바로 올리지를 못함... 대부분 글 작성은 다 해놓고 임시저장해놓고아 내용 보충 더 하면 좋겠는데... 상태로 놔둔다.그러다 삘 받으면 우르르 올리는 편. 그래서 글 한 번 올라올 때 갑자기 여러 개 올라오는데.........................뜬금없이 이런 얘기를 적은 이유는.........마지막 포스팅이 4월이길래........ 요즘 일정 상 CS 회의를 많이 안했어서 올리는 시간이 유예되어도 괜찮았다보니...!글은 꾸준히 썼는데 포스팅을 안 했었다.지금도 내겐 임시저장 포스팅들이 노려보고 있다는 소리...하지만 현재도! 포스팅 새로 쓰고 있다! 그리고 포스팅 정리하기 힘들어서 갑자기 딴 소리 쓰러 샌 것도 맞음...글..

📑 개요리액트를 처음 써보면 자주 하는 실수가 있다.바로 return의 최상단 태그를 감싸주지 않아 오류가 나는 것......처음 사용할 땐 이것 때문에 자주 버벅였다.어 왜 안되지.. 어라.. 어? 하고 시간 날리다가 깨닫기를 세번 정도 반복하고서야 안 하는 실수...        🧶 React.Fragment는 여러 요소를 그룹화할 때 사용하는 도구이다.JSX에서는 최상단 태그를 통해 하나의 부모 요소로 감싼 후 return을 해줘야 한다.컴포넌트가 렌더링 될 때 효율적인 비교를 위해 실제 DOM 트리는 하나의 구조로 이루어져야 한다.이를 위해 fragment를 사용하여 컴포넌트가 렌더링될 때 실제 DOM에 별도의 노드를 추가하지 않고 여러 요소를 그룹화는 것이다. 참고로 는 의 축약형으로 용도의..

📑 개요제어 컴포넌트와 비제어 컴포넌트는...정말 말 그대로 제어의 여부라! 특별할 건 없는 거 같다!들어가보자!        🪛 제어 컴포넌트와 비제어 컴포넌트란?- 제어 컴포넌트 (Controlled Components)대부분 상태(state)에 의해 제어되며 입력 요소의 값이 변경될 때마다 상태 업데이트가 발생한다.주로 setState()로 값을 저장하는 방식을 이야기한다. - 비제어 컴포넌트 (Uncontrolled Components)주로 DOM에 의해 직접 제어되며 일반적으로 ref를 사용하여 DOM 요소에 직접 접근하고 입력 요소의 값을 가져오거나 변경한다.기존의 바닐라 JS와 크게 다르지 않은 방식으로 클릭시 요소 내부의 값을 얻어온다. 따라서 setState()가 아닌 ref를 사용해..

📑 개요메모이제이션! 성능을 위해 썼다고 하는데 사실 난 딱히 쓴 기억이 없다뭔가 자주 쓰면 안된단 말도 있던데... 흠...이걸 쓸만큼? 써야하는? 그런 상황의 개발이 없었던 거 같기도 하고.내가 몰라서 그렇게 생각하는 걸지도?아무튼 안 써 본 거니까 공부하면 도움이 되겠지근데 항간에 들리는 소문으로는.......... React 19 버전이 나오면서 메모이제이션을 안 써도 된다던데.....?! 😬       💽 메모이제이션(Memoization)이란?이전에 계산한 값을 캐싱하여 메모리에 저장함으로써 동일한 계산 시 불필요하게 반복되는 계산 과정 대신 이전에 저장 값을 반환하는 기술로 성능 최적화에 사용된다.동일한 입력으로 반복 호출되는 함수나 컴포넌트가 있을 때 유용하다. (ex. 재귀 함수) ..

스터디 리더로 현재도 진행중이고추후에는 방식을 바꾸고, 인원추가도 고민을 좀 해보며 이어나갈 스터디.총 스터디원은 나까지 4명으로 시작했고,1명은 현재 취업하여 근무 중이라 작성을 하는 이 시점에는 3명이 진행하고 있다. 스터디는 1월부터 했는데, 회고는 5월에 한다.당시에는 그냥 정신이 너무~ 너무나 없었기 때문에.지금은 스스로 약간 늘어진 게 느껴져서 마음을 다잡고자 쓰는 회고. 혹시나 스터디를 진행하려는 사람이 참고할 때 읽어도 좋고나 또한 조금 쉬어가는 호흡으로 작성하는 거기도 하다. 만약 스터디 진행을 참고하고 싶다면 바로 챕터 2로 가길...      CHAPTER 00. SSAFY, 잘 마무리 했나요? 관점에 따라 다르다.수료에 중점을 둔다면 수료증 받고 프젝 세 번 다 상 받고싸피 사람들하..

📑 개요 차이점............... 음....... 쓰다보면 그냥 익혀지는 건지라............ 규칙................... ....엄.... 딱히 개요에 쓸 말이 없다...........😂 🍭 HTML과 React의 이벤트 처리 차이점 1. 이벤트 이름 HTML - 속성의 이름을 Lower Case로 적는다. // onclick Click me React - 속성의 이름을 Camel Case로 적는다. // onClick Click me 2. 핸들러 함수 형태 HTML - 이벤트 핸들러를 문자열로 직접 설정하거나, 함수를 전역 변수로 선언하여 사용한다. // 문자열로 이벤트 핸들러 설정 Click me // 전역 함수로 이벤트 핸들러 정의 React - 이벤트 핸들러를 JS 함..

📑 개요 어딜 가도 동기 비동기는 빠지질 않는 문제구나! 가보자궁...🤔 🦎 React의 State란? 컴포넌트 내부에서 관리되는 데이터로 컴포넌트의 상태를 저장하고 관리하는데 사용된다. State는 주로 동적인 데이터를 다룰 때 사용되며, State가 변경될 때 React는 자동으로 컴포넌트를 재렌더링하고 변경된 상태를 화면에 반영한다. - 왜 state라는 변수를 사용하죠? const, let, var과 같은 것을 안 쓰고 왜 굳이 state를 쓰는가 궁금한 사람이 있을 것이다. state는 일반 변수와 달리, 컴포넌트 렌더링에 영향을 주는 객체로, 컴포넌트 안에서 관리된다. 단, state를 직접 수정하면 React가 render 함수를 호출하지 않아 렌더링이 일어나지 않으므로, setState(u..

📑 개요 부모에서 자식으로 데이터를 전달하는 방법 - props 사용 부모 컴포넌트에서 데이터를 변경하는 함수를 props로 전달하고 자식 컴포넌트에서 전달받은 함수를 호출하여 데이터를 변경한다. 자식은 props를 통해 부모에게 데이터를 줄 수 없다. Parent.js import { useState } from "react"; import Child from "../../components/Child"; export default function Dev() { const [name, setName] = useState("ChaCha"); return ; } Child.js export default function Child(props) { return {props.name}; } 자식에서 부모로 데..