컴포넌트 추상화 공통적인 요소들을 추출해 불필요한 부분들을 생략하고 객체의 속성 중 중요한 것에만 중점을 두어 개략화(사전 : 대강 추리는 일) 하는 것 하나의 컴포넌트가 하나의 책임만을 담당한다. 책임이란 어플리케이션에서 컴포넌트가 하는 행동 컴포넌트들을 각각의 책임에 맞게 필요한 로직만으로 구성한다면 응집도가 높아지며, 다른 컴포넌트와의 결합도는 줄고 컴포넌트 특성상 외부로 노출할 필요가 없는 부분은 캡슐화가 될 것 컴포넌트는 이벤트 기반으로 스타일과 DOM 구조까지 고려하여 고유한 책임을 수행하게 되기에 버튼에 스타일을 적용하거나 클릭했을 때의 애니메이션을 넣거나 필요에 따라 색상과 폰트를 변경하거나 생각보다 다양한 것들이 책임을 수행하기 위해 고려되어야 한다. 텍스트와 같이 작은 책임 수행을 넘어서 레이아웃의 형태를 책임지는 컴포넌트, 서버와의 통신을 통해 데이터를 가져오는 컴포넌트, 특정 도메인에 관련된 비즈니스 로직을 수행하는 컴포넌트 등 범위가 확대될수록 이러한 책임을…

하단 토스 컨퍼런스 내용 clean code 개발할 때 병목이 되고 유지보수가 오래걸리며, 기능 추가가 불가능하거나, 성능이 안좋을 수 있는 코드는 다음과 같다. 흐름 파악이 어렵고 도메인 맥락 표현이 안되어 동료에게 물어봐야 알 수 있는 코드 읽기 좋은 깔끔한 코드는 코드 리뷰의 시간을 단축하며, 버그가 났을 때 디버깅 시간도 단축시킨다. 클린코드의 의의=유지보수(코드파악, 디버깅, 리뷰) 시간(시간=자원=돈)의 단축 나쁜 코드는 하나의 목적인 코드가 흩뿌려져 있는 경우 다 떨어져 있어 나중에 기능을 추가할 때 스크롤을 위아래로 이동하며 미로찾기를 해야함 하나의 함수가 여러가지 일을 하고 있는 경우 세부 구현을 모두 읽어야 함수의 역할을 알 수 있다. 코드 추가 및 삭제도 시간이 걸림 함수의 세부 구현 단계가 제각각일 경우 큰 그림을 보며 리팩토링 하면 함수 세부 구현 단계 통일 하나의 목적인 코드는 뭉쳐두기 하나의 함수는 한가지만 하도록 쪼개기 ⇒ 클린코드란 짧은 코드가 아닌 …

사용시 이점 중간에 service worker를 통해서 네트워크 요청을 가로채고 모의 응답을 받아 반환하기 때문에 기존 data fetch 로직을 그대로 사용하여 mock 데이터를 반환 받을 수 있다. 그렇기 때문에 api 가 혹시라도 늦게 나온다고 하더라도 사전에 api spec 만 미리 맞춰놓는다면 네트워크 요청 로직을 미리 작성해 놓고 그대로 사용하여 테스트할 수 있다. 데이터를 하드코딩 하거나 mock server를 만든다고 하더라도 추후에 url 및 엔드포인트 변경이라던가 네트워크 요청 로직을 다시 작성할 필요가 있는데, msw는 그에 비해 on/off 하듯이 기존에 필요한 로직을 그대로 사용하여 원하는 데이터를 조작하여 사용할 수 있어 백엔드와 개발 시점이 겹친다고 하더라도 일정이 미뤄지지 않고 개발할 수 있다. 원하는 테스트를 진행하기 위해 db 조작을 따로 요청할 필요 없이 mock 데이터를 생성해 테스트할 수 있다. header, cookie 등 네트워크 요청시 사…

code smells in css css 규칙 스타일은 추가만하고 취소는 하지 않도록 한다. 매직넘버(반드시 그렇게만 작동하는 값) 피하기 조건부 선택자를 피한다. 재사용 불가능하고 특정도를 높이며 선택자를 한정함으로 브라우저 작업량을 증가시켜 성능을 저하시킨다. 꼭 필요한 경우를 제외하고 절대값을 피하고 상대값을 사용한다. 무차별 강제 스타일을 피한다. 위험한 선택자(너무 광범위하게 적용될 수 있는 것)를 피한다. !Important 피하기 사용시 명확한 의도를 갖고 사용하도록 한다. ID 보다 class를 선호하라 class는 한 페이지에 한번만 존재해도 되고 여러번 존재해도 되며 재사용이 가능해지는 경우가 많다. 느슨한 클래스 이름(의도한 목적을 충분히 드러내지 못하는)을 피한다. Reference CSS 코드 냄새

next 12 버전대에서 변경됨 NextJS 12 버전부터 SWC를 Next.js Compiler 로 소개한다. SWC는 Rust 기반의 컴파일러로 싱글 코어에서 babel 보다 20배, 4 코어에서 babel 보다 70배 빠르다고 소개하고 있다. babel의 한계점 배포 뒤, 개발자들이 babel이 변경한 코드를 이해하기 어려워 할 수있다. 코드의 크기가 늘어난다. polyfill을 사용해서 babel이 지원해주지 않는 범위까지 변환해주어야 한다. 다른 컴파일러보다 시간이 오래 걸린다. SWC 컴파일러 SWC(Speedy Web Compiler)는 Rust로 작성된 컴파일러이다. 저급 프로그래밍 언어인 Rust로 작성되었기 때문에 컴파일시 매우 빠르게 동작한다. 개발자들은 웹사이트 최적화, 번들링, 컴파일 등 다양한 기능을 위해 SWC를 사용할 수 있다. SWC의 장점1. 확장성: 개발자들은 라이브러리를 fork 해올 필요 없이 Next JS에 미리 설치된 SWC를 사용할 수 있…

패키지 관리자(feat: yarn berry , pnpm) node_modules 구조 하에서 모듈을 검색하는 방식은 기본적으로 디스크 I/O 작업이다. 이는 node_modules가 가진 문제이기 때문에 yarn classic과 npm 모두에 해당되는 내용 이처럼 모듈 탐색을 메모리 상에서 자료구조로 처리하지 않고 I/O로 직접 처리하다보니 추가적인 최적화가 어렵고 실제로 yarn 개발진은 이러한 이유들로 더 이상 최적화 할 여지가 없었다고 문서에서 밝히고 있다. yarn berry에서는 PnP 라는 기술을 통해 이를 개선한다. yarn berry(PnP) yarn, npm과 다르게 node_modules를 갖고 있지 않다. 대신 각각의 의존성들이 zip 파일로 압출되어 .yarn/cache에 ./pnp.js로 저장된다. node_modules는 사이즈와 복잡성 등 여러가지 이유로 commit되면 안되지만 zip 파일을 commit 하는 것은 간단하다. 그렇기 때문에 브랜치를 바…

React Query 기본적으로 데이터를 fetch 해온 후 캐싱하게 되며 캐싱한 데이터는 stale 하다고 판단한다. stale time을 지정할 수 있다. 포커스가 들어왔을 경우(refetchOnWindowFocus), 새로 mount 되었을 때(refetchOnMount), 네트워크가 끊어졌다가 다시 연결된 경우(refetchOnReconnect), 데이터가 stale 하다고 판단될 수 있는 경우에 서버에서 데이터를 가져와 캐싱을 했어도 refetch하도록 지정할 수 있다. 위의 컨셉으로 인해 사용자는 항상 fresh한 데이터를 보게할 수 있다. 지원 기능 및 동작 렌더링 퍼포먼스 측면에서 쿼리가 업데이트 될때만 컴포넌트를 업데이트하며 여러 컴포넌트가 같은 쿼리를 사용할 시 한꺼번에 묶어 업데이트 해준다. 쿼리가 지정된 시간동안 사용되지 않을 경우 자동으로 garbage collection을 지원한다. 데이터 프리패칭이 가능하다. 프로미스에 cancel 함수를 적용하면 프로…

Default Cache Behavior 데이터가 서버로부터 fetch 되면 RTKQuery 데이터를 redux에 cache로 저장하게 된다. 같은 데이터를 위해 또 다른 요청을 하게 된다면 추가 요청을 하는 대신 RTKQuery는 존재하는 캐시 데이터를 제공하게 된다. 구독이 시작되면 엔드포인트에 사용된 parameter는 serialized되며, 내부적으로 요청 캐시키로 저장된다. 앞으로 같은 캐시키를 생성한다면 원래의 것과 비교해 중복되지 않게 하며, 같은 데이터와 업데이트를 공유하게 된다. (두개의 다른 컴포넌트에서 같은 요청을 하게 된다면 같은 캐시된 데이터를 사용하게 된다.) 요청이 시작되고 데이터가 이미 존재한다면 서버로 요청을 하지 않고 데이터를 주게 되고 데이터가 캐시에 존재하지 않는다면 새로운 요청을 하게 되면 해당 response는 캐시로 저장하게 된다. 구독은 reference-counted(참조횟수 계산 방식)이다. 같은 엔드포인트+param 에 대한…

flex flex 항목을 로 지정하면  로 지정한 것과 동일하게 동작합니다. 이 경우, flex 항목들은 가 0이므로 값보다 커지지 않고 가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어듭니다. 또, 가 이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.  로 지정하면 로 지정한 것과 동일하며,  과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다. 으로 지정하면 으로 지정한 것과 동일하며 flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 를 로 지정했을 때 정해지는 크기로 결정됩니다. 이 축약형은 더 축약해서  이나 처럼 쓸수도 있는데, 이는  만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 는 와 동일하게 처리됩니다. flex-direction row, row-reverse, column, column-reverse flex-b…

modal vs react-native-navigation modal When the modal becomes visible, the modal screen component is mounted , and when the modal is hidden, the screen is updated  and unmounted . These are the three phases in the component lifecycle: mounting, updating, and unmounting. A component is mounted when “it is being created and inserted into the DOM” [1]. An update is triggered when the component’s props or state are changed. Unmounting is when a component is being removed from the DOM. Executing a p…

배포 자동화 (fastlane vs bitrise) ios Testflight + fastlane firebase app distribution + fastlane android google play console 내부 테스트 firebase App Distribution + fastlane —> 많이 사용하고 명령어 하나로 가능함 설정 fastlane 설치 프로젝트 폴더 내 gemfile에 코드 추가 firebase 연결 fastlane 에서 env 사용 Android env 파일 iOS env 파일 Codesigning Using match The concept of match is described in the codesigning guide. With match you store your private keys and certificates in a git repo to sync them across machines. This makes it easy to onboard n…

env 설정 react-native-config staging, production 환경 변수를 나누기 위해 react-native-config 패키지를 이용한다. react-native-dotenv The variables will automatically be pulled from the appropriate environment and is the default. The choice of environment is based on your Babel environment first and if that value is not set, your NPM environment, which should actually be the same, but this makes it more robust. In general, Release is  and Debug is  여러 환경에서 해당 패키지를 이용하기 위해서는 dotenv-flow가 필요함 (패키지 gihub 문서 Readme 에서 확…

React Native Navigation 화면 이동  pushes a new route to the native stack navigator if it’s not already in the stack, otherwise it jumps to that screen. We can call  as many times as we like and it will continue pushing routes. The header bar will automatically show a back button, but you can programmatically go back by calling . On Android, the hardware back button just works as expected. You can go back to an existing screen in the stack with , and you can go back to the first screen in the stack…

redux-toolkit 프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행한다. Redux Toolkit을 이용한다면 createAsyncThunk를 사용해 비동기 처리를 진행할 수 있다. createAsyncThunk() 액션을 정의 위와 같이 첫번째 파라미터로 typePrefix로 액션 타입을 생성하고, 두번째 파라미터로 promise 기반으로 결과를 반환하는 action을 작성한다. createAsyncThunk는 Promise의 3가지 상태와 같이 pending, fulfilled, rejected의 상태를 갖는다. extraReducer 리듀서에 연결 사용 redux toolki…

Redux action useReducer를 이용하면 컴포넌트에서 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 해줄 수 있다. 액션은 객체로 type 필드를 작성해 다양한 상황을 만들어 준다. store 리덕스에서는 한 어플리케이션당 하나의 스토어를 만들게 되며 그 안에는 state, reducer 및 내장함수들이 있다. Dispatch 스토어의 내장함수 중 하나로 액션을 인자로 넘겨 Reducer() 함수를 실행하여 액션 ㄱ밧을 받아 상태를 변경한다. Reducer 2개의 인자값을 받아와 state 값에 변화를 일으키는 함수로 현재의 state와 전달받은 action을 참고하여 새로운 state를 return 해준다. subscribe 함수 형태의 값을 파라미터로 받아와 전달하면 액션이 디스패지 될 때마다 전달해준 함수가 호출된다. dispatch 되어 state 가 변경될 때 리렌더링 해준다. Connect() useSelector connect()함수에서 mapRe…

React Native Component HTML에서 사용하는 tag 들을 어떻게 대체하여 사용할 수 있는지, react native에서 사용할 수 있는 컴포넌트들에 어떤 것들이 있는지 알아보자 div -> View img -> Image svg가 아닌 png 이미지 이용시 source props를 통해서 사용할 수 있다. span,p -> Text react native 에서 텍스트 보여주기 위해서는 반드시 Text 컴포넌트를 이용해야한다. allowFontScaling props를 통해서 휴대폰 설정의 폰트크기가 앱에 영향을 미치지 않도록 설정할 수 있다. includeFontPadding props를 통하여 폰트에 extra padding이 들어가지 않도록 방지할 수 있다. ul/ol, li -> FlatList button -> Button input -> TextInput 휴대폰 키보드를 통해 텍스트를 입력할 수 있는 컴포넌트 ScrollView vs FlatList vs…

HTTP 요청 최소화 웹사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성되는데 이 요소는 모두 웹서버에 있으며, 사용자의 컴퓨터로 가져오는데 네트워크 비용이 들고 이 비용은 곧 응답시간으로 이어진다. 그렇기 때문에 다운로드해야하는 구성 요소의 개수를 줄이는 것이 가장 크고 효과적이다. 재사용 방문자를 위해 캐시 설정을 진행할 수도 있다. 파일 개수 최소화 웹사이트의 성능을 개선할 때는 파일의 용량보다 개수가 더 중요하다. 아주 용량이 작은 파일이라도 원격 서버에서 가져와야한다면 네트워크 비용이 든다. 파일이 캐시에 있더라도 해당 파일이 유효한지 판단해야하며 병렬로 다운로드 하는데 한계가 있기 때문에 파일의 개수가 늘어나는 것은 성능에 치명적이다. 파일 크기 최소화 쿠키 크기 최소화 필요한 정보를 저장하는 가장 쉬운 방법이 최상위 도메인을 이용해 쿠키를 설정하는 것인데 이렇게 되면 자바스크립트 파일이나 스타일시트 파일, 이미지 등 쿠키 정보가 필요없는 구성 요소를…

Javascript: 비동기 자바스크립트에서 비동기를 사용하려면 1. callback, 2. promise, 3. async function 을 사용할 수 있다. callback 의 문제점 promise 이전 콜백만을 사용해 비동기 코드를 작성해왔지만 이 방식은 callback 지옥이라는 문제가 발생할 수 있다. callback 의 무한 중첩으로 코드의 맥락과 흐름 파악에 어려움을 느낄 수 있고 콜백 뎁스에 추가적인 로직이 들어간다면 코드는 더 복잡해지게 된다.(콜백의 경우 코드 진행이 순차적이 지 못해 코드의 컨텍스트 및 흐름 파악에 어려움이 있을 수 있다.) 어떠한 함수에 콜백을 넘기면 콜백에 대한 제어권은 호출부를 떠나 그 함수에 넘어가게 되며 이를 제어의 역전 (IoC, Inversion Of Control)라고 한다. 콜백 체계에는 코드의 순차성, 빋음성이 결여되는 결함이 생기며 콜백 지옥이 펼쳐질 수 기때문에 그 문제점을 해결하기 위새 ES6부터 promise 가 도입되…

javascript 자바스크립트는 스크립트를 작성해 실행하는데 컴파일이 필요하지 않은 Interpreter 언어이다. 하지만 자바스크립트 엔진 내부에서 실행중 컴파일이 필요한 경우 내부에서 컴파일한다. compile 언어 compile 언어와 interpreter 언어의 가장 큰 차이점은 pre-processting, 즉 compile 유무이다. compile이란 A를 B 언어로 변환하는 과정으로 고금 언어로 작성된 소스코드를 기계어로 변환하는 것을 의미한다. 변환된 기계어는 고급 언어를 바로 인터프리팅 방식으로 실행한 것보다 빠르다. interpreter 언어 interpret은 코드를 한줄씩 순차적으로 bytecode(abstraction of machine code)로 변환하는 방식이다. 이 bytecode를 가지고 컴퓨터가 이해할 수 없기 때문에 그것을 받아서 실행해주는 프로세스 가상 머신이 필요한데 이 가상 머신이 런타임에 호출되는 부분을 골라서 실행한다. 컴퓨터가 바로 …

브라우저 브라우저는 1. 서비스 이동, 2. 리다이렉트, 3. 어플리케이션 캐시 확인, 4. 네트워크 통신, 5. 브라우저 처리 단계로 나누어지며 각 단계마다 최적화에 고려해야 할 사항들이 있다. 동작 방식 기반 최적화 웹페이지 최적화는 브라우저가 네트워크와 통신하는 과정과 브라우저에서 페이지를 표시하는 과정에서의 응답 속도를 개선하는 것이기 때문에 브라우저가 어떻게 동작하는지 이해하는게 좋다. 서비스 이동(prompt for unload) 사용자가 웹 서비스를 이용하다 다른 주소로 이동할 때 브라우저가 제일 먼저 실행 사용자가 웹 서비스를 이용하다 다른 주소로 이동할 때 브라우저가 제일 먼저 실행하는 단계로 페이지가 표시될 떄 이벤트가 할당되고 메모리를 사용하게 되는데 이 메모리를 더이상 사용하지 않을 때(페이지를 떠날 때) 메모리를 해제해야한다. 필요없는 메모리를 해제(가비지 컬렉션)하지 않으면 브라우저가 응답 없음 상태가 되거나 실행 속도가 급격히 느려지게 된다. DOM의 …

테스트의 기본 테스트 케이스는 어떠한 가정을 통해 참과 거짓을 반환하며 가정이 변하지 않는 이상 테스트의 결과는 항상 동일해야한다. 가정은 테스트 케이스의 의도를 포함하며 각 테스트 케이스 하나당 하나의 의도만을 포함해야한다. 테스트 분류 Unit Test (단위 테스트) 모듈(함수/클래스) 단위의 테스트한다. 테스트할 부분의 코드를 다른 시스템으로부터 분리(isloate)시킨 채 테스트한다. 작성 비용이 적게 들고 실행 속도가 빠르다 실패했을 때 문제가 생긴 부분을 비교적 정확하게 파악할 수 있다. 경우에 따라 한두개의 단위를 모아서 하나의 단위로 취급하기도 한다. Integration Test (통합 테스트) 주로 단위 테스트보다 큰 범위의 테스트를 의미한다. 개별 모듈(함수/클래스)들이 연결되어 제대로 상호작용하는지를 테스트 단위 테스트에 비해 작성이 어렵고 실행 속도가 느리다 단위 테스트에 비해 실패 시 문제가 생긴 부분을 정확히 파악하기가 어렵다 End-To-End Tes…

InMemoryCache apollo client는 gql의 결과를 inMemoryCache에 저장하며 이를 통해 클라이언트는 불필요한 네트워크 요청 없이 동일한 데이터에 대해 요청할 수 있다. https://images.velog.io/images/zoeyul/post/4afc798e-3b20-46db-8b64-c8c887f1f17f/Screen%20Shot%202021-07-07%20at%201.45.39%20AM.png apollo cache는 먼저 캐시에 원하는 데이터가 있는지 확인하고 있으면 그대로 반환한다. 원하는 데이터가 없을 시 외부 서버로 해당 데이터를 요청한 후 재사용을 위해 반환되는 값을 받아오거나 직접 캐싱을 구현한다. 기본 캐시 설정 클라이언트를 생성할 떄 캐시 객체를 생성하여 넘겨주면 되고 options 인수로 TypePolicy의 keyFields, read, merge function을 다룰 수 있다. InMemoryCache는 쿼리 응답 개체를 내부 …

Next.js Vercel 이라는 프론트엔드 팀에서 만들었으며 따로 설정해주지 않아도 SSR, SEO, Typescript등을 지원하는 React 프레임워크로 static asset과 severless function으로 만들어진 hybrid application에 알맞는 solution이다. 기능 코드 스플리팅 일반적인 리액트 싱글 페이지는 초기 렌더링 때 모든 컴포넌트를 내려받지만 용량이나 규모가 커지면 로딩 속도가 지연될 수 있다. Next에서는 필요에 따라 파일을 불러올 수 있게 여러개의 파일을 분리하는 코드 스플리팅을 사용하였다. 폴더 구조를 보면 pages 폴더 안에 각 page(라우트) 들이 들어가며 컴포넌트 폴더에는 리액트 컴포넌트들이 들어가는데 브라우저가 실행되고 사용자가 접속하면 첫 페이지인 index 페이지만 불러오고 그 이후에 다른 페이지로 넘어갔ㅇ르 떄는 해당 페이지만 불러오게 된다. 간단한 클라이언트 사이드 라우팅 Router와 Link를 모두 사용할 수 …

Hook 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. class 안에서는 동작하지 않으며 class 없이 react를 사용할 수 있게 해준다. 사용 규칙 최상위 에서만 Hook을 호출하며 반복문, 조건문, 중첩된 함수 내에서 hook을 실행하지 않는다. early return이 실행되기 전 react 함수의 최상위에서 hook을 호출하며 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook이 호출되는 것을 보장하며 useState와 useEffect가 여러번 호출되는 중에도 hook의 상태를 올바르게 유지할 수 있도록 새준다. 일반 javascript 함수에서는 hook을 호출하지 않는다. React 함수 컴포넌트 내에서만 호출하거나 직접 작성한 custom hook 내에서만 hook을 호출하면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다. eslint-plugin-react-hoo…

React Native Expo vs RN CLI React Native CLI native file들을 더 많이 컨트로로 하고 싶을 때 사용한다. React Native CLI를 사용하면 xcode 파일을 생성하고, 안드로이드 파일을 생성하여 양쪽 파일들이 리엑트 네이트브에서 실행된다. 양쪽 파일에 다 접근할 수 있기 때문에 어떤 때에는 둘을 합칠수도 있다. Expo 모든 native file들은 숨기고 모든것을 관리한다. react native cli에 비하여 빠르게 핸드폰에서 앱을 테스트할 수 있다. 앱을 build하는 방식, simulation, react native update를 처리해주며, react native에 비해 더 많은 모듈들이 있다. expo는 create-react-app과 같으며 그 위에 더 많은 것들을 제공해준다. CLI에 비해 수동적으로 진행해야하는 작업이 덜하고 시작하는데 훨씬 빠르다. native file에 대한 접근은 할 수 없다. Startin…

Hooks 함수형 컴포넌트에서도 상태를 관리하기 위해서 hooks를 사용한다. useState 컴포넌트에서 동적인 값을 상태(state)라고 하는데, 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다. useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데, 첫번째 원소는 현재 상태, 두번째 원소는 Setter함수이다. 배열 비구조화 할당을 통하여 다음과 같이 사용하지 않고 각 원소를 추출해서 사용한다. Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해준다. 함수형 업데이트 setter 함수를 사용할 때 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줄 수도 있지만 그 대신에 기존 값을 어떻게 업데이트 할지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있다. 이렇게 그 다음 상태를 값을 업데이트 하는 함수로 파라미터에 넣어주며 함수형 업데이트는 주로 컴포넌트를 최적화 하게될 때 사용된다. use…