본문 바로가기

React128

React(87) 여러 버튼 중 하나 클릭시 색상변경하기 여러 버튼이 있을 때, 하나만 클릭하면 색상이 변하게 만들어보자 워낙 비슷한 요구사항들이 많기 때문에 그동안 비슷한 포스팅도 여럿 올린 것 같다. 하지만 과신과 방심은 금물이다 예전포스팅보다 조금 더 리팩토링된 코드로 다시한번 복습해보자 :) React(87) 여러 버튼 중 하나 클릭시 색상변경하기 새발컴퍼니 회원모집 모달창이 있다. 세가지 회원 타입이 있는데 하나를 선택해서 클릭하면 색상이 변경된다고 해보자 과거의 새발자가 작성했던 방식은 타입과 타이틀이 분리되어 HTML 태그에서 합쳐서 보여주는 방식이였다. 지금의 새발자는 객체형식으로 따로 노는 { 타입과 타이틀 } 을 묶어보았다. const items = [ { type: 'general', title: '일반 회원 가입하기', }, { type:.. 2022. 11. 7.
React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 상품 판매를 위해서 필터기능은 소중하다. 유저에게 편리한 경험을 제공해줄 수 있기 때문이다. 아래에서 구현하는 필터기능은 순전히 프론트 위주이다. 선택한 필터에서 값을 추출하는 단계까지만 구현한 코드이다. API의 메소드와 쿼리는 각각마다 다르기 때문에 api를 사용하기 직전까지만 응용가능한 정도로 정리해보았다. 자, 그럼 시작해보자 결과화면 미리보기 React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 CategoryFilter.tsx 일단 준비물로 타입선언부터 해주자 interface Category { name: string; state: string; } 필요한 변수를 준비물로 선언해주자. // 요 카테고리 아이템들 속에는 { 이름과 상태 } 값들이 들어있다 const category = [.. 2022. 10. 31.
React(85) React-Query - useQuery 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다. 가장 기본적인 사용법을 익혀보도록 하자 Create, Update, Delete 에서는 React-Query 를 어떻게 사용하는지 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(84) React-Query - useMutation 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 create 와 update, delete 를 하기 위해서는 useMutation() 을 사용해야 한다. 이미 실무에서는 내부 api용 라이브러리와 커스텀 훅을 만들어 useMutation 을 사용하.. devbirdfeet.tistory.com React(85) React-Query .. 2022. 10. 11.
React(84) React-Query - useMutation 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 create 와 update, delete 를 하기 위해서는 useMutation() 을 사용해야 한다. 이미 실무에서는 내부 api용 라이브러리와 커스텀 훅을 만들어 useMutation 을 사용하고 있지만, 가장 기본적인 사용법을 이해하고자 포스팅을 올려본다. Get 방식으로 React-Query 를 어떻게 사용하는지 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(85) React-Query - useQuery 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다. 가장 기본적인 사용법을 익혀보도록 하자 Create, Update, Delete 에서는 React-.. 2022. 10. 3.
React(83) TypeScript - Record 란 Record 는 React v2.1 부터 도입된 유틸리티 타입이다. 요 녀석은 객체전용 타입이다. Record 는 요렇게 두 개의 제네릭 타입을 받을 수 있다. 첫번째 제네릭 타입 K 는 key 의 타입이고, 두번째 제네릭 타입 T 는 value 값의 타입을 의미한다 type studentNames = Record; ↑ ↑ 객체에서 키의 타입 값의 타입 쉽게 말해서 나는 객체 안의 값들을 전부 string 으로 사용하고 싶다. Record 가 없었을 때는, 객체 프로퍼티 타입을 하나하나~~~~ string 이라고 적어줘야 했다. type studentNames = { name1: string; name2: string; name3: string; name4: string; }; 하지만 Record 를 사.. 2022. 9. 23.
React(82) HTTP 통신 delete 요청보내기 (게시물 삭제) HTTP 통신에는 크게 4가지 방식의 요청이 있다. 게시글을 예로 들어보자 게시글 생성은 POST(create) 요청을 하고, 게시글 수정은 PUT(update) 요청을 하고, 게시글 삭제는 DELETE 요청을 하며, 게시글 보기는 GET(read) 요청을 한다. 오늘 구현해볼 HTTP 요청은 DELETE 이다. 사실 삭제가 제일 쉽긴 하다. 그럼 구현하러 가보자 React(82) HTTP 통신 delete 요청보내기 (게시물 삭제) Api.ts 여기는 deletePost 함수가 들어있다. http.delete 메소드를 사용한다. export async function deletePost(id: number): Promise { try { const res = await http.delete( // de.. 2022. 9. 21.
React(81) 동시접속시 한쪽이 취소하면, 다른한쪽의 버튼 막기 두 회원이 중고제품을 거래중이라고 가정해보자. 거래를 하는데 판매자가 거래취소를 하게되면 실시간으로 구매자가 결제를 하지 못하게 막아야 불상사가 일어나지 않는다. 이런 막중한 책임감을 가지고 후덜덜하면서 짯던 코드를 공부용으로 다시 정리해보았다. 판매자 [취소하기] 버튼을 누르면 취소상태가 된다. 구매자 취소상태가 되면 즉시 [결제하기] 을 버튼을 막아야함 결과화면 미리보기 판매자 아이디로 접속해 있을 때 [취소하기] 버튼을 누르면 구매자 화면에서는 [결제하기] 를 누르면 결제 버튼이 활성화 → 비활성화 된다. React(81) 동시접속시 한쪽이 취소하면, 다른한쪽의 버튼 막기 payment 타입과 상태 변수 // 페이 진행상황을 타입으로 정리해보았다. type PayStatusType = 'start'.. 2022. 8. 21.
React(80) 객체 값을 동적으로 할당하기 나는 if 문과 switch 문의 신봉자였다. 하지만 조건문을 사용(남발)하게 되면, - 조건문이 속한 함수가 매번 렌더된다. - 조건에 맞는지 일일이 검사를 해야한다. 얼마전 사수님과 이야기하다 조건문을 최소화하여 객체의 키값으로 바로 해결할 수 있는 방법을 사용해보게 되었다. - 객체는 첫 렌더시에 이미 메모리에 저장되있고, 키값만 넣어주면 바로 가져올 수 있다. - 객체는 순서를 보장하지 않는다. (즉, 순서대로 검사한다는 개념 자체가 없다 원샷원킬) React(80) 객체 값을 동적으로 할당하기 원하는 자동차 회사를 알려주면, 회사별로 판매하는 차 가격에 대한 정보를 알려주는 코드라고 해보자. 일단 자동차 회사 타입을 정해주고, 차 가격 정보를 알려주는 객체도 만들어 보았다. (🐣 "흠 나는 신입.. 2022. 8. 18.
React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형으로 입력받아야만 하는 경우가 있다. 이럴 때 onChange 메소드 안에서 string → number 로 형변환을 해서 toLocaleString() 을 사용해도 콤마( , ) 가 추가되는 순간 문자열로 인식되기 때문에 제대로 동작을 안하는 이슈가 생겨 버린다. 이런 경우 내장함수보다는 정규식을 사용하는 것이 더 좋다! 그럼 이런 까탈스런 경우를 해결하러 가봅시다 결과화면 미리보기 React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 여기서 관건은 onCha.. 2022. 8. 13.
반응형

티스토리툴바