useState3 여러개의 모달을 하나의 state로 관리하기 이번 프로젝트는 main에서 바로 리스트 노출이 되기 때문에 여러 모달을 한번에 관리해주어야했다. 더군다나 여태까지 작업할 땐 파일 한개에 모달이 한개여서 1모달 1state라 문제 없이 잘 작동하였는데, 여러 모달에 state는 하나라 한개를 누르면 다같이 모달이 열리는 것이다. 마치 왼쪽의 사진처럼 말이다. 그래서 하나의 state로 여러 모달을 관리하는 방법을 아래에 기술하도록 하겠다. useState 선언 및 함수 만들기 먼저 모달을 열고 닫을 수 있도록 isOpen이라는 boolean 값을 가진 state를 선언해준다. 이때 우리는 단순히 boolean으로 적었지만 앞으로 isOpen은 {id: boolean}처럼 생긴 객체로 관리될 것이다. const [isOpen, setIsOpen] = u.. 2023. 8. 16. 댓글 기능 구현하기 바닐라 자바스크립트에서 했던 댓글 기능을 리액트로도 구현해보려고 한다. DOM 직접 조작과 너무 달라서 한참 애를 먹었다. 멘토님께서 배열을 사용해서 해야한다고 힌트를 줘서 먼저 useState로 변수 선언 먼저 했다. 댓글이 들어가는 input 의 value를 가져오는 idValue, 만들어진 댓글이 들어갈 배열인 saveComment, 댓글이 한글자라도 적히면 버튼의 색을 바꿔줄 btnColor를 만들어주었다. const [idValue, setIdValue] = useState(''); const [saveComment, setSaveComment] = useState([]); const [btnColor, setBtnColor] = useState(0.3); 그리고 앞서 포스팅했던 로그인 버튼 활.. 2023. 6. 19. 로그인 버튼 활성화 구현하기 idValue의 값이 조건을 만족할 때 로그인 버튼이 활성화되고 버튼을 누를 수 있도록 만들고 싶었다. 그리고 버튼을 누르면 main 페이지로 이동할 수 있도록 만들어 주려고 했다. 바닐라 자바스크립트에서는 DOM을 직접적으로 조작하면서 input창의 값을 불러왔는데 리액트는 가상돔을 구현하기때문에 직접적인 DOM 조작을 할 필요가 없어서 뭔가 다른 산을 만나게 되었다. 일단 이번에 useState와 useNavigate 훅을 사용할 예정이기 때문에 import를 해주었다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; id와 pw의 input 창의 값.. 2023. 6. 19. 이전 1 다음
