본문 바로가기

React128

React(44) 리액트 훅 - useMemo 란? memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있죠. React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있습니다. 랜더링마다 호출되는 컴포넌트 함수 useMemo란 성능 최적화를 위하여 연산된 값을 재사용.. 2021. 9. 9.
React(43) 리액트 훅 - useCallback 이란 내가 사용하면서 느낀 useCallback 은 리액트 전용 콜백함수라는 느낌이 강했다. 보통 자바스크립트만 사용하다가 callback 지옥을 경험해봤다는 목격담을 많이 전해들었다. (후덜덜) 다행히도 리액트에서는 콜백함수가 쓰이지 않는다. 그렇지만 가끔씩 비슷하게 써야할 때가 있다. 자 그럼 useCallback() 이 무엇인지 알아보자. React(43) 리액트 훅 - useCallback 이란 - 내가 이해해본 useCallback() useEffect 는 (() => { 두번째 배열 [test] 라는 변수에 변화가 있을 때만 렌더링을 새로 하는 것 처럼 }, [ test ]) useCallback 도 (function() { 두번째 배열 [test] 라는 변수에 특정 변화가 있을 때만 함수를 새로 .. 2021. 9. 7.
React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type 리액트에서 타입스크립트를 사용하다가 에러가 났다. 강의만 들어봤고, 처음 사용해보았던 터라 당황했지만 차근차근 해결해 나갔다. 처음에는 타입스크립트만 쓰지 않았더라면 이런 고생을 하지 않고 진작에 개발이 끝났을 텐데 하는 불평도 많이 들었다. 그렇지만 쓰다 보니 변수 관리가 훨씬 잘된다는 사실을 깨달았다. 그리고 이 포스팅은 내가 겪은 이슈들의 기록이다. 언젠가는 쌓이겠지 휴 ... (Updated 02/21/22) 오랜만에 예전에 쓴 포스팅을 봤는데 추가할 부분이 있어 수정해보았다. 아직도 부족하다고 생각하지만 몇 개월전의 나를 보니 정말 쌓이긴 하는 것 같다. React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type props 를 넘겨주다 발생한.. 2021. 9. 6.
React(42) 리액트 훅 - POST 방식으로 요청 보내기 통신 "영단어 새로 추가해줘" (Create) "영단어 목록 좀 보여줘봐" (Read) "영단어 수정 좀 해줘" (Update) "영단어 지워줘" (Delete) 클라이언트는 서버에게 요청을 보낸다 이 때 API라는 체계를 이용해 클라이언트와 서버 간에 요청과 응답을 주고 받는다. 이 때 CRUD 방식을 사용한다. CRUD 클라이언트가 서버에게 요청을 보낼 때 이 요청들을 크게 4가지 성격으로 분류할 수 있다. CRUD라고 불리는 이 4가지 대표적인 요청에 대해 살펴보자. Create = POST create는 서버에 정보를 올려달라는 요청이다. ( 생성 ) create는 POST 메서드를 사용해 해당 URI를 요청하면 리소스를 생성한다. Read = GET read는 서버에서 정보를 불러오는 요청이다... 2021. 9. 4.
React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기 updated 11/19/22 학습만 해봤던 타입스크립트를 사용하여 실무에 적용하는 중이다. 역시 세상에 쉬운일은 없다는 걸 새삼 느끼지만 차근차근해나가면 안될일은 없다. 자 그럼 작업해보자. 오늘도 새발자는 지식공유를 위해 열심히 달립니다. React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기 리액트 훅과 타입스크립트로 모달창을 구현해볼 것이다. 일단 필요한 준비물은 부모 컴포넌트인 OrderList와 모달창의 역할을 할 자식 컴포넌트인 OrderModal 이다. OrderList.tsx 부모컴포넌트 일단 isShow 상태변수를 선언하고 Boolean 값을 준다. 이게 모달을 보여주는 스위치가 될 것이다. 요청서를 열었다 닫았다 할 function 인 openReq() 와 closeReq() .. 2021. 9. 2.
React(40) 리액트 훅 - Custom Hook 만들기 커스텀 훅을 만들어보자. 한마디로 만능 함수 컴포넌트를 따로 만들어서 필요한데 어디든 한 줄 붙여넣으면 다 된다. 이전 시간에 연습했던 가내수공업같이 그 속에서 자급자족하던 코드들 중 통신용 함수를 따로 떼어다가 커스텀 훅을 만들어 보았다. 맨처음에는 햇갈렸다. 리액트 훅도 개념이 안잡히는데 커스텀 훅은 이게 무슨 @.@ ???? 하지만 계속 접하다보니 그 개념이 이해되었다. 아마 코드경험을 3번정도 하고 나면 이해가 갈 것이다. 동영상이든 블로그든 하면 된다. 혹시 코드 해석하다가 디테일하게 궁금한 점이 있다면 ? 어차피 내용은 똑같으니 지난 포스팅을 클릭해보자. Hoxy .... 커스텀 훅 만들기 전에 새발자가 일일이 가내 수공업으로 실습한 코드를 보고 싶다면? ↓↓↓ React(39) 리액트 훅 -.. 2021. 9. 1.
React(39) 리액트 훅 - json-server 사용하여 통신하기 리액트 훅 영단어장을 만드는 실습 중이다. json-server 로 통신하여 영단어 데이터를 호출하여 사용해보자. Hoxy .... json-server 실행하는 방법을 모르신다면 ? 지난 포스팅을 참고해주세요. React(38) 리액트 훅 - json-server 로 RESTful API 만들기 리액트 실습 중이다. json-server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리이다. REST API 서버의 기본적인 기능을 대부분 갖추고 있지만 프로덕션 전용은 아니다. 프로토타입을 만들거 devbirdfeet.tistory.com React(39) 리액트 훅 - json-server 사용하여 통신하기 화면에서 날짜별 버튼이 나오고, 그 버튼을 누르면 해당 날짜에 암기해야할 영단어가 .. 2021. 8. 25.
React - json-server 실행오류 net::ERR_CONNECTION_REFUSED 리액트 실습 중, 백엔드에서 api 를 받을 수 없기 때문에 json-server 를 설치하였다. 하지만 연결이 되지 않아 한시간을 해매였다. 에러메시지의 내용은 다음과 같다. ㅠㅠ net::ERR_CONNECTION_REFUSED React - json-server 실행오류 net::ERR_CONNECTION_REFUSED 문제상황 '토익 영단어' 라는 타이틀 바로 아래에는 api 로 받아온 버튼들이 들어가야 한다. 하지만 아무 내용이 없다. 개발자 도구 - 네트워크 탭을 확인하여보니 error 가 떠있었다. 즉, json-server 자체를 아예 받지 못한다. 그래서 이번에는 json 서버 url 로 직접 접속해보았다. 하지만 사이트에 연결 할 수 없다는 메시지만 뜬다. (서버자체의 연결이 안 되어있.. 2021. 8. 21.
React(38) 리액트 훅 - json-server 로 RESTful API 만들기 리액트 실습 중이다. json-server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리이다. REST API 서버의 기본적인 기능을 대부분 갖추고 있지만 프로덕션 전용은 아니다. 프로토타입을 만들거나, 지금처럼 공부를 위하여 서버가 필요할때에 사용하면 아주 적당한 도구이다. RESTful API는 무엇일가? 개념이 궁금하다면 ↓↓↓ 클릭 https://devbirdfeet.tistory.com/350 json-server 사용하기 준비물은 json 파일이다. 프로젝트 내의 디렉토리에 만들어줬다. 그럼 시작해보자. 1. 터미널에서 아래 명령어로 설치하기 npm install -g json-server 2. 설치했으니 실행시켜주자. json 파일 경로와 포트# 도 넣자. json-serve.. 2021. 8. 20.
반응형

티스토리툴바