프로그래밍
-
[리액트를 다루는 기술] immer프로그래밍/React 2023. 6. 20. 00:09
immer은 언제 쓰이는가? spread연산자만으로는 깊은복사가 나왔을 때 제대로 대처하기 어렵다. 그래서 써야하는 게 이 immer라이브러리이다. 또한 전개연산자를 자주 사용하게 되면 가독성도 좋지 않아서 이러한 상황에서는 immer을 적극 활용해 보자. (깊은복사의 방법에서 immer함수가 쓰인다) import produce from 'immer'; const nextState = produce(originalState, draft => { darft.somewhere.deep.inside = 5//바꾸고싶은 값 }); 라이브러리이기때문에 따로 설치해야 함 yarn add immer 이 함수는 불변성 신경 안쓰는거 같아보여도 다 관리하는 게 특징임 원래 spread연산자 쓴 자리에 produce 갈아..
-
[리액트를 다루는 기술] 컴포넌트의 반복프로그래밍/React 2023. 6. 18. 18:14
반복되는 컴포넌트를 다루는 기술~ 박복되는 코드를 작성하는 경우 (댓글달기 같은 경우를 생각하면 됨) key라는 놈이 좀 중요한 역할을 한다 이 key를 설정을 안해주면 Virtual DOM을 일일히 비교하면서 변화를 감지하는 수고스러운 행동을 하기 때문에 key를 설정하고 이 key의 변화를 바로바로 얘기해주면 아주 좋다 props 설정 하는 것처럼 하면 되서 하기도 쉽다 쉬워~ 이때 map()함수 꿀팁이 있으니 map()함수에서 보자 map() 먼저 ES6문법에서 새로워진 화살표함수와 const를 통해서 정의하는게 보기 좋다 key 설정 꿀팁은 map함수에서 전달되는 콜백함수의 index값을 이용하자 이다. map()을 써서 일일히 key를 할당을 해야하는데 이 방식을 쓴다면 아주 꿀빨면서 key를 ..
-
[리액트를 다루는 기술] Hook (useState, Effect, Reducer, Ref) 1편프로그래밍/React 2023. 6. 18. 15:52
useState 가장기본적인 Hook 함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다. ( useState를 구조분해할당으로 받은 것 뿐임) const [name, setName] = useState(''); 인자로 초깃값이 들어가는데 아무거나 다 잘 먹는다. 호출하면 배열이 반환되는데 첫번째 원소는 상태값 두번째 원소는 상태를 바꾸는 함수가 들어있으며 이 함수는 세터함수라고 한단다 한 컴포넌트 안에 여러번 사용해도 상관 없단다(한개의 useState는 하나의 상태만을 관리하므로 여러번 사용해야 할 때가 분명있다) 리액트를 처음배운다면 useState가 시작이다 함수형업데이트 useState로 생성한 state가 변경이 될 때마다 랜더링이 일어나게 되는데 리액트 환경은 랜더링을 최소한으로 줄이고 싶어한..
-
[리액트를 다루는 기술] 컴포넌트프로그래밍/React 2023. 6. 18. 15:47
컴포넌트의 종류와 특징 class형 컴포넌트 시작하면서 나오는 내용이라서 기억하는거지 요새 잘 안쓰인다고 한다 (Hook 기능이 추가되고 나서) 그래서 읽을 수 있을 정도의 능력만 갖추면 될듯.. 클래스 형태를 띄고 있어서 누가봐도 클래스형으로 보임 render()함수가 꼭 필요함 꼭 선언해주어야함(retrun 값이 이 함수 안에 들어가야한다) state 설정 시에 2가지 방법이 있는데 생성자를 선언해서 super와 this를 써서 초기화 해주는 방식과 그냥 state 객체를 만들어 주는 방법 2가지가 있다 함수형 컴포넌트 클래스형 컴포넌트보다 이점이 많은데 그중 하나가 메모리를 덜 사용하고 크기가 작다는 것(크게 중요 x) Hook을 활용해서 라이프사이클 기능과 Component 기능 임의 메서드 생성..