본문 바로가기
728x90
반응형

React23

[react] react-modal 라이브러리를 이용하여 모달창 구현하기 react-modal 라이브러리를 사용하여 모달창을 구현해보려고 한다. 라이브러리를 사용하면 아주 쉽게 원하는 모달창을 구현할 수 있다. 정답 확인이라는 버튼을 클릭했을 때 정답을 모달창을 통해 보여주는 코드를 구현하고자 했다. 1. 먼저 라이브러리 설치부터 해주자! npm i react-modal 2. 정답 확인 버튼을 클릭했을 때 모달창을 보여주기 위해 state를 하나 생성한다. 정답 확인 버튼에게 onClick 이벤트를 주고 클릭될 때마다 생성한 state 값이 true 또는 false 값을 가질 수 있도록 했다. const [modalIsOpen, setModalIsOpen] = useState(false); const showAnswer = () => { setModalIsOpen(!modal.. 2023. 3. 15.
[React] 이미지 슬라이드(가로형,버튼O,반응형) 만들기 이미지 슬라이드를 만든 코드를 남겨두려고 한다. 웹 서칭을 많이 했는데 나와 완전 똑같은 것을 구현해둔 선배 개발자 분들은 안계셨다,, 빙빙 돌아왔지만 어쨌든 해결했으니깐! 혹시혹시 나와 같은 도움이 필요하신 분도 있을 거 같아서! 따로 툴을 사용하지 않고, 이미지 슬라이드를 직접 구현했다. 완성한 화면은 아래와같다. 슬라이드 바를 사용해서도 원하는 이미지를 볼 수 있고, 좌우 버튼을 클릭하여 원하는 이미지를 볼 수 있다. 그리고 반응형으로 개발하여 화면 크기가 줄어들면 그에 따라 화면에 보이는 최대 이미지 개수도 달라진다. 코드 및 설명 const imgSrcList = ['url', 'url', 'url', 'url', 'url', 'url']; const ref = useRef(null); // r.. 2023. 3. 7.
[React+TS] textarea 줄바꿈하는 법, 입력한 값만큼 height 늘어나게 하는 법 문제점 react로 프로젝트를 진행하면서 글쓰기를 구현하고 있었다. textarea를 사용했는데, 원하는 텍스트를 입력했을 때 줄바꿈이 되지 않고 스크롤러가 생기는 문제점이 있었다. 결과 화면 내가 원하는 것은 이런 것이 아니라 작성된 글의 높이만큼 textarea의 height이 늘어나길 바랬다! 바로 이렇게 말이다! 해결 방법 및 코드 설명 해결한 방법은 아래와 같다. const [text, setText] = useState(''); const textarea = useRef(null); const resizeHeight = ( textarea: React.RefObject, e: React.ChangeEvent ) => { if (textarea.current) { textarea.current... 2023. 2. 27.
[React] 클릭한 <Button> 색상 변경하기 프로젝트를 진행하면서 버튼을 클릭하면 해당 버튼의 색상을 변경하고 싶었다. useState와 onClick 이벤트를 사용하면 아주 쉽게 원하는 동작을 구현할 수 있다. 나는 참고로 tailwind-css를 사용하고 있다. 작성된 코드를 보는게 이해하기 쉬워 밑에 코드를 참고하는 것이 좋다. import { useState } from 'react'; function Button({ name, className }) { const [clicked, setClicked] = useState(false); const onClick = () => setClicked(!clicked); return ( onClick()} > {name} ); } export default Button; useState를 사용하여.. 2023. 2. 22.
[React] react-select 사용해서 select 만들기 + select 전부 초기화하는 법 react-select 설치하기 npm i react-select Select 사용하기 import Select from 'react-select'; import { useState } from 'react'; function CustomSelect() { const options = [ { value: 'CS', label: 'CS' }, { value: '프론트', label: '프론트' }, ]; const placeholder = '카테고리 선택'; const [selected, setSelected] = useState(''); const onChangeSelect = (e: any) => { if (e) setSelected(e.value); else setSelected(''); }; ret.. 2023. 2. 21.
728x90
반응형

티스토리툴바