DEV/react
-
React Error : autoprefixer: start/end value has mixed support, consider using flex-start/end insteadDEV/react 2024. 4. 18. 11:16
// start -> flex-start로 변경 하라고 한다. autoprefixer: start value has mixed support, consider using flex-start instead // 본인 css의 "justify-content: start" 와 "align-items: start" 를 찾아서 변경해주자 // "justify-content: start" 를 하단 css로 변경 justify-content: flex-start // "align-items: start" 를 하단 css로 변경 align-items: flex-start // end -> flex-end 변경 하라고 한다. autoprefixer: end value has mixed support, consider u..
-
React 전역 변수를 사용하자 (부모-자식 컴포넌트 접근, Context)DEV/react 2024. 2. 21. 16:57
React를 사용하면 Component로 화면을 분리하여 사용하게 된다. 물론 Props을 통해 변수나 함수를 던지고 사용할 수 있지만 나처럼 멍청한 사람은 React의 특징을 이해하지도 못한채 router로 페이지를 나눠버리고 그 안에서도 여러 depth의 Component를 구성하게 되는 경우도 있다. API 통신을 통해 가져온 Token을 전역 변수로 설정하려고 했는데 로그인 페이지와 접속 이후 페이지가 React router로 나눠버리는 바람에 Props로 던지기가 힘들었다. 그래서 전역 변수로 사용하는 법을 찾게 되었고 그 방법에 대해 설명하려고 한다. 1. tkContext.js 생성 index.js의 Router render 부분을 감싸줄 Provider를 만들어야 했다. 나는 토큰을 저장하..
-
-
React Component 가변적으로 생성/추가하기, 제거하기 (Alert 가변 생성 예시 포함)DEV/react 2024. 2. 19. 11:00
* 컴포넌트 동적으로 생성/추가(가변적으로 생성)하는 코드만 필요한 경우 앞 Alert 코드는 넘어가도록 하자. 회원가입 및 로그인 기능을 구현하다 보니 로그인, 회원가입에 대한 Alert이 필요했다. (성공, 실패 여부. 에러 및 실패에 대한 사유 등 알림을 띄워주기 위해 필요.) Alert Component를 하나 만들고 로그인 및 회원가입 API Response에 따라 Alert을 가변적으로 생성하려고 한다. 우선 Alert 코드를 다음과 같이 생성하였다. Alert.js import style from '../../style/component/Alert.module.css' import React, { useRef, useEffect } from 'react'; /** * [Alert] * @pa..
-
React Javascript 키 입력 이벤트 "onKeyPress is deprecated..." onKeyDown, onKeyUp을 쓰자.DEV/react 2024. 2. 16. 10:51
Javascript나 React에서 현 시점에서 onKeyPress를 쓰면 onKeyPress 와 같이 표출되면서 "onKeyPress is deprecated" 경고문이 발생한다. "나중에 지원 안할꺼니까 쓰지 마셈" 경고문이다. (사실 아직은 좀 많이 남았지만...) 아무튼 당장 사용에 문제는 없지만 onKeyDown이나 onKeyUp와 같은 이벤트를 사용하여 작성하자. // ...생략 const enterKeyEvent = (e) => { if(e.key === 'Enter') { // ... 이벤트 동작 } } // (React input)...생략 onKeyDown={enterKeyEvent}