Today Sangmin Learned
article thumbnail
[React] 간단한 인라인 텍스트 에디터(inline text editor) 만들기
Web/React 2021. 6. 5. 20:02

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