오늘은 기존에 쓰던 react-simplemde-editor 마크다운 에디터를 버리고 toast-ui 에디터로 바꾸었다. 다른 건 다 그렇다 치는데 Next에서 렌더링이 안되었고 그 해결책을 찾기가 어려웠다. 그래서 바꾸고 난 뒤에 Next에서 사용할 수 있게끔 처리를 해서 페이지에 띄우는 데는 성공하였다. 이제, 용어의 이름과 마크다운 각각에 대해 값이 들어가있는지의 여부를 파악하는 useState Hook을 두가지 만들었다. import React, { useState, useCallback } from 'react' const TermRelated = () => { interface ITerms { id: number text: string } const [inputTerm, setInputTerm..

특정 값이 들어가 있고, 버튼을 눌렀을 때 값을 변경할 수 있게끔 하고, 저장을 누르면 그 값으로 바뀌는 inline text editor를 만들어 봤다. 함수형 컴포넌트로 진행했고, 로컬에서 진행했음을 먼저 말한다. 스타일링은 styled-components를 사용했는데, 여기서 스타일링은 중요한 부분이 아니므로 생략한다. 우선, useState로 두 가지 값을 정의한다 1. 수정 모드로 들어가는 useState (editMode로 정의했다.) 2. 텍스트 값에 대한 useState (text로 정의했다.) 연필 버튼을 눌렀을 때 editMode가 바뀌게 하기 위해서 editMode를 false로 지정해주었고, text는 현재 서버와 연결되어있지 않기 때문에 임의로 userState를 만들어서 그 안의..

기존의 checkbox 상태관리에서, 성별 및 연령대 select value 선택 시 버튼이 활성화되도록 기능을 추가했다. select는 Material-UI 라이브러리의 Select를 활용했다. 사용하고 싶은 것만 취사선택하여 코드 복붙을 하였고, option value를 그대로 적용시키기 위해 onChange 함수를 걸었다. 기본적으로 Material-UI에서 제공하는 것들을 import해준 뒤(앞 사진) handleChange 함수를 type에 따라 구분하였고, useState를 활용하여 현재 선택된 값(e.target.value)을 성별에 설정(setSearchSex), 연령대에 설정(setSearchAge) 해줬다(뒷 사진). isAllChecked라는 변수에, 기존의 checkbox 상태관리 ..

종합설계 프로젝트에서, 체크박스의 상태관리 및 체크박스 전부 체크 시 버튼을 활성화하는 부분을 구현하는데 애를 먹었다. 여러 방법이 있지만, useState를 활용하여 상태관리를 하는 방법을 남겨보고자 한다. const SignupContents = ({ history }) => { const [checkedButtons, setCheckedButtons] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedButtons([...checkedButtons, id]); console.log(체크 반영 완료); } else { setCheckedButtons(checkedButtons.filter(button =>..