본문 바로가기

React128

React(56) a 태그에서 onClick 이벤트 사용하기 (무효화) 를 둘 다 넣었다. 실행 클릭하면 온클릭 함수가 실행되며 모달창이 뜨고 [확인] 을 클릭해야 페이지가 이동되는 순서이다. 하지만 생각처럼 풀리지 않았다. 어려워하지 말고 이제 구현하러 가보자. React(56) a 태그 이벤트 막고 원하는 시점에 페이지 이동시키기 모달에 넣을 내용들이다. (모달 타이틀 / 모달 메시지) const [modal, setModal] = useState(); const modalTitle = useRef(''); const modalMsg = useRef(''); [결제하기] 버튼을 클릭했을 때, 조건에 따라 실행되는 메소드이다. 약관에 체크안하고(!check) 상대방이 거래 취소가 아닐 때(step !== cancel) 와 약관에 체크했으나(check) 상대방이 거래 취소를.. 2022. 1. 30.
Styled-components(4) 배열로 된 div를 2열로 나열하기 배열로 된 데이터를 map()를 이용해 동적으로 가져오면, div가 한 영역 안에 길게 나열된다. 하지만 테이블처럼 2열로 레이아웃해야한다면? (한시간 정도 구글링으로 뒤지면서 어려운 길로 빠지려다 가까스로 구원받았다... 흑흑) 자, 그럼 2줄로 나누러 가보자. (딱 2줄의 코드면 해결되더라 ... 허무쓰) 결과화면 미리보기 매핑된 데이터라 로 영역을 나눌 수 없는 상태에서 column을 2줄로 나누어야 한다. Styled-components(4) 배열로 된 div를 2열로 나열하기 사실 정말 심플하다. 1열 만큼의 width 를 잡아 고정시키고, flex-wrap 속성을 사용하는 것이다. {items.map(item => item)} // 매핑한 데이터 가져왔다고 가정하고 const DIV_Box =.. 2022. 1. 17.
Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 styled-components 로 개발하며 첫 난관은 자식 컴포넌트에 스타일을 적용하는 것이었다. pure css 로는 필요한 div 태그에 클래스를 만들었는데, 이제 이 방식은 통하지 않는다. 부모 컴포넌트에서 자식에만 있는 속성을 변경하고자 한다. 하지만 자식은 공통컴포넌트라 그 안에서 직접적인 수정이 어렵다. 결국 자식을 건들지 않고, 부모 쪽에서 구체적인 속성 값을 줘서 해결해야 하는 것이다. (나의 경우, 간단하게도 자식컴포넌트의 패딩값을 변경하는 거였는데, 이 쉬운 것을 styled-components 초짜가 하려니 한참 뱅뱅 돌았다.) 자, 그럼 css 를 물려주러 떠나보자. Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 자식 컴포넌트에 스타일을 .. 2022. 1. 7.
Styled-components(2) global 스타일 세팅하기 styled-components 를 사용하여 css 를 컴포넌트화 하여 배경색을 변경하는 실습을 해보자. Styled-components(2) global 스타일 세팅하기 src/typings/theme.d.ts global에 원하는 css 를 작성하기 전에, type을 선언하자. import 'styled-components' import { theme } from '../styles' type Theme = typeof theme declare module 'styled-components' { export interface DefaultTheme extends Theme {} } src/styles/theme.ts 그리고 theme 이라는 css 컴포넌트를 만들어주자. 나중에 여기서 필요한 속성을 .. 2022. 1. 4.
React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링) 부모 영역에서는 클릭하면 상세 페이지로 들어가는 이벤트가 있고, 자식 영역에서는 클릭하면 다른 상세 페이지로 들어가는 이벤트가 있다. 이 때는 부모 영역을 클릭하더라도 자식 이벤트 발생 후 부모 이벤트가 발생한다. 이는 부모 영역이 자식의 영역을 덮고 있어 이벤트 버블링이 발생하여 생긴 이슈이다. 이를 해결하기 위해서는 이벤트 객체를 받아 중지시키는 stopPropagation() 함수를 사용하면 된다. 결과화면 미리보기 **이벤트 버블링이란 (더보기클릭) 더보기 자식함수가 부모 내부에 존재하기 때문에 떨어진 물방울이 바깥으로 번지듯이 자식 → 부모 순으로 이벤트가 실행이 된다. React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링) Detail.tsx 자식태그의 onClick 함수인.. 2022. 1. 3.
React(54) 타입스크립트 - 버튼 클릭시 버튼 색상 변경하기 리액트로 메뉴 버튼들을 만드는 중이다. 버튼을 클릭하면 클릭한 버튼의 색이 변하게 만들고 싶다. 자 그럼 지금 만들러 가보자. 결과 화면 미리보기 [메뉴 1] 을 클릭하면 그 버튼이 파란색이 되고, [메뉴 2]를 클릭하면 마찬가지로 해당 버튼의 색이 변한다. React(54) 타입스크립트 - 메뉴 버튼 클릭시 버튼 색상 변경하기 먼저 useState 를 이용하여 버튼의 색상을 변경해볼 것이다. 토글 버튼일 때는 boolean값을 주어서 스위치처럼 이용했었지만, 메뉴 버튼은 스위치 개념이 아니라 boolean 대신 분기를 쳐줄 string 값을 넣어 줄 것이다. TabComponent.tsx const [tab, setTab] = useState('curr'); setDealTab('curr')} // 클.. 2021. 12. 2.
React(53) 타입스크립트 - 체크박스 약관 선택 이벤트 / 자식에서 부모로 데이터 보내기 여태까지는 부모에서 자식으로 데이터를 내려보내기만 해봤다. 하지만 오늘은 자식에서 부모로 데이터를 올려보내 보자. 여기서 핵심은 자식에서 새로 생성하는 데이터를 부모에게 보내주는 것처럼 보이지만, 사실은 부모가 가진 데이터를 props 로 물려주면 → 자식이 가공한 뒤 → 다시 부모한테 돌려주는 방식 이다. 자, 그럼 한번 실습해보자! 부모가 자식에게 props 전달하는 방법이 궁금하시다면 ? ↓↓↓ React(34) 리액트 훅 - 부모가 자식에게 props 전달하기 사람이 커뮤니케이션을 할 때, 정보를 말이나 문자로 주고 받는다. 그 정보를 바탕으로 행동을 하여 결과를 만든다. 컴퓨터로 커뮤니케이션을 할 때도 마찬가지이다. 정보를 컴퓨터 언어로 데이 devbirdfeet.tistory.com React.. 2021. 11. 16.
React(52) 타입스크립트 - 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 리액트와 타입스크립트를 사용하여 메뉴를 클릭했을 때, 페이지의 내용을 변경해보려고 한다. 이때 react-router 을 통하지 않고 즉, url 을 변경하지 않고 컴포넌트의 내용을 변경해볼 것이다. 그럼 시작해보자. React(52) 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 그룹 메시지를 클릭하면 그룹대화 리스트가 나오고, 개인 메시지를 클릭하면 회원 등급 별로 각각 다른 대화리스트가 보여진다. MsgList.tsx 에서는 전체 맥락을 그릴 것이다. 메뉴를 클릭할 때마다 조건이 변경되며 그에 맞는 통신함수가 실행되고 객체를 받아온다. 그리고그 객체를 자식 컴포넌트인 MsgItem 에 넣어주자. MsgList.tsx (import 구문은 생략하였습니다.) const MsgList = (): Re.. 2021. 11. 1.
React(51) 체크박스 에러 You provided a 'checked' prop to a form field without an 'onChange' handler 문제상황 리액트에서 를 쓸 때, onClick 핸들러를 통해 조건에 따라 checked 값을 주는 식으로 코딩하면 이런 에러 메시지가 발생한다. 이유는 checked 값을 핸들링하려면 onChange 핸들러를 사용해야 하기 때문이다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. 해결방법 - onClick 핸들러를 없애고 onChange 핸들러를 사용한다. - onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다. → 나의 경우에는 리드온리를 붙여줬더니 깨끗하게 해결되었다. 2021. 10. 18.
반응형

티스토리툴바