ReactHook17 React(48) 타입스크립트 - 토글 메뉴에 animation 효과주기 타입스크립트와 리액트로 메뉴 접고 펼치기 기능을 구현 중이다.토글까지는 아주 쉽게 구현을 하였지만, 자연스럽게 펼쳐지는 애니메이션을 적용하려니 아~주 골치가 아팠다. ㅠㅠ 동적인 코드에 애니메이션 기능은 처음이라 한참 헤매였다. 하지만 언제나 그렇듯, 항상 어렵사리 해결을 하면 몇줄의 코드로 끝나게 된다. 조금 허무하기도 하지만 뿌듯하다.자 그럼 이제 만들어보자. 이슈- @key frame 을 적용한 animation 속성을 이용하려 하였으나 양방향 애니메이션이 적용이 되지 않았다.- 토글 기능을 적용한 메뉴는 동적으로 받아온 api 객체를 사용하여 보여준다. 즉 동적으로 height 속성을 적용하려니 동작이 되지않았다. ex) 이런식으로 height : calc(100% - 20px) React(48.. 2021. 9. 14. React(44) 리액트 훅 - useMemo 란? memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있죠. React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있습니다. 랜더링마다 호출되는 컴포넌트 함수 useMemo란 성능 최적화를 위하여 연산된 값을 재사용.. 2021. 9. 9. 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(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(37) 리액트 훅 - 토글버튼 + 체크박스 구현하기 리액트 훅으로 영단어 프로그램을 구현하는 중이다. 오늘 실습해볼 내용들은 토글 버튼과 체크박스를 구현하는 것이다. 토글 기능으로 '뜻보기' 라는 버튼을 누르면 단어의 뜻이 나오고, '뜻숨기기' 라는 버튼을 누르면 단어가 감춰진다. 또한 체크박스 기능으로 다 외운 영단어를 체크박스에 표시하면 그 단어가 비활성화 된다. 스포일러 1. 토글버튼 구현 '뜻 보기' 버튼을 누르면 pencil 의 뜻인 '연필' 이 나오고 '뜻 숨기기' 버튼을 누르면 뜻이 감춰진다. 2. 체크박스 구현 외운 단어에 체크하면 단어가 비활성화 된다. **토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태 밖에 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값.. 2021. 8. 19. React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 리액트를 사용하여 다이나믹 라우팅(Dynamic Routing) 을 구현하여 페이지를 동적으로 이동해보자. 스포일러 Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다. (Day2 를 누르면 day/2 로 변할 것이다.) React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 라우터 설치하기 터미널에 아래 명령어로 리액트 라우터를 설치하기 npm install react-router-dom 컴포넌트 구조 - component 안에는 Days.js / DayList.js / Header.js 컴포넌트들이 들어있다. - db 안에는 data.json 이라는 객체 데이터가 들어있다. ( api역할 ) - App.js 는 최상위 컴포넌트이다. App.js 여기.. 2021. 8. 17. React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 자, 리액트로 데이터를 이리저리 굴려보자. 원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 스포일러 토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다. 1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다. (여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.) React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 파일구조 먼저 .. 2021. 8. 14. 이전 1 2 다음 반응형
