작심삼일 개발이야기

useState와 매우 비슷하다.첫 번째 값은 현재 상태두 번째 값은 업데이트 함수이다.  // 설치 방법npm install immer use-immer 상태값이 객체일 때import { useImmer } from 'use-immer';// 상태값이 객체일 때function App() { const [person, updatePerson] = useImmer({ name: "suhyeok", age: "27" }); const updateName = (name) => { updatePerson(draft => { draft.name = name; }); } const plusAge = () => { updatePerson(draft => { draft.age++; }); }}상태값이..

useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한 수단은 props이다. 자식을 수정하려면 props를 전달해서 자식을 다시 렌더링해야 한다. 하지만 Ref를 사용하면 자식에 대해 직접적으로 접근할 수 있다. React 공식문서에서 Ref의 바람직한 사용 사례 3가지가 있다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 하지만 Ref를 남용하지 말라고 한다.

useRef가 내가 모르는 기능을 가지고 있다는 얘기를 듣고 검색해보고 적는다.. 끄적끄적모르는 게 끝이 없다....클래스형 컴포넌트와 함수형 컴포넌트에서 사용법이 조금 다르다. 함수형만 사용해보아서 함수형으로 정리를 해보았다. ref에 대해 (소소하게) 정리한 글도 있으니 참고.ref란? useRef에서 Ref가 궁금하다.useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 아아 공부하기 싫다 ~ 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한choisuhyeok.tistory.com기능 1. useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해 준다.  export default function ..

리액트의 상태관리에서 불변성을 지키라는 말 한번은 꼭 들어봤을 것이다. 왜 불변성을 지켜야하는 지에대해서 공부해 보았다. 리액트에서 불변성이란 기존의 값을 직접 수정하지 않고 새로운 값을 만들어 수정하는 것을 뜻한다. const [numberArray, setNumberArray] = useState([]); const plusArray = (e) => { setNumberArray([...numberArray, e.target.value]); } 배열을 관리하는 set함수를 사용할 때 setNumberArray처럼 기존 numberArray를 직접 수정하지 않고 새로운 배열을 만들어서 수정해준다. 아래의 예시코드로 불변성을 어떻게 지키는지 알아보자 const arrayA = [1,2,3,4,5]; co..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 8장. 경계 개발을 하다 보면 모든 기능들을 직접 구현하지는 않는다. 때로는 무료로 공개된 라이브러리들을 사용하거나 돈을 내고 사용하는 경우도 있다. 라이브러리를 사용하는 사용자들은 자신들의 요구에 딱 맞는 기능을 기대하고, 라이브러리를 만드는 개발자들은 최대한 범용적으로 사용할 수 있게 만들고 싶어 한다. 이러한 경우 때문에 문제가 생길 소지가 많다. 라이브러리를 사용하면 적은 시간에 더 많은 기능을 출시할 수 있어진다. 하지만 그 코드를 익히기 어렵다. 어떤 식으로든 나의 코드에 깔끔하게 통합해야한다. 무작정 라이브러리를 사용하기보단 간단한 테스트 케이스를 작성해서 라이브러리를 익히는 방법을 추천한다. 이를 학습 테스트..

리듀서는 현재 상태, 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때 불변성을 꼭 지켜야 한다. // 리듀서 함수const reducer = (state, action) => { switch (action.type) { case 'PLUS': return { value : state.value + 1}; case 'MINUS': return { value : state.value - 1}; defatul: return state; }}// 액션 값{ type : 'PLUS'}useReducer에서는 type이 없어도 되고 객체가 아니어도 된다. 사용법const Counter = ..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. "오류 처리는 프로그램에 반드시 필요한 요소 중 하나일 뿐이다. 입력이 이상하거나 디바이스가 실패할지도 모르기 때문이다." 맞는 말이다...사용자들은 개발자가 원하는 입력 값만 입력하지 않기 때문이다. 그렇기 때문에 예외처리는 필수다. 오류 코드보다 예외를 사용하라 책에서는 if문을 사용하는 것보다 try catch문을 사용하라고 한다. public void Person() { if (mycar != stop) { // 자동차가 멈춰있으면 걸어간다. walk(); if (trafficLight !=green) { // 보행자 신호등이 초록색이면 길을 건넌다. crossTheRoad(); } else { stop(); } }..

props로 받아온 값을 useState의 초기값으로 사용하여 렌더링 할 때 값이 분명 변경되었는데 useState에 들어간 값이 변하지 않는 문제가 생겼다. 이유는 useState의 초기값으로 props를 사용했기 때문이다. const Box = ({ num }) => { const [boxState, setBoxState] = useState(num); return box State ${boxState}; }; const App = () => { const [parentState, setParentState] = useState(); return ( parent state: {parentState} ); ); 이렇게 Box컴포넌트에서 전달받은 num이라는 props를 useState의 초기값으로 할당..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 디미터 법칙 모듈은 자신이 조작하는 개체의 속사정을 몰라야 한다는 법칙 객체는 자료를 숨기고 동작을 공개한다. 그래서 기존 동작을 변경하지 않으면서 새 객체 타입을 추가하기는 쉬운 반면, 기존 객체에 새 동작을 추가하기는 어렵다. 자료구조에 새 동작을 추가하기는 쉬우나, 기존 함수에 새 자료 구조를 추가하기는 어렵다 그래서 새로운 자료 타입 추가가 필요하면 객체가 더 적합하다. 이번 파트는 이해가 잘 가지 않는다. 어렵다..

내가 사용하는 라이브러리의 버전을 확인하려고 package.json을 찾아본 적은 있지만 package-lock.json은 뭐하는 파일인지 몰라서 검색해보고 쉽게 정리해보려고 한다.package-lock.json이란?npm을 사용해서 package.json 파일 또는 node_modules 트리를 수정하면 자동으로 생성되는 파일이다.package.json을 통해서 라이브러리 버전을 확인할 수 있는데 package-lock.json이 존재하는 이유는 뭘까? package.json과 package-lock.json의 차이는 뭘까?흔히 라이브러리 버전을 확인하려면 package.json을 보고 버전을 확인하곤 한다.package.json에 적혀있는 버전은 특정 버전이 아니라 버전의 범위(version rang..