코딩배우는고양이

개요 스택오버플로우를 클론 코딩하는 Pre-project 팀 과제를 진행하던 중, 질문 상세 페이지와 수정 페이지, 답변 수정 페이지에서 중복되는 코드가 많이 발생하였다. 질문 등록 페이지 AskQuestion function AskQuestion() { const [titleValue, setTitleValue] = useState(""); const [bodyValue, setBodyValue] = useState(""); const submitHandler = (e: React.FormEvent) => { e.preventDefault(); setBodyValue(""); }; return ( Ask a public question submitHandler(e)}> Post your question..

프로젝트 소개 프로젝트명: TO-DO-IT 리액트와 스프링부트를 연동한 투두리스트 어플리케이션 기술 스택 주요 기능 투두리스트 CRUD 완료시 목록의 하단으로 이동, 완료 날짜 출력 목표 달성도 실시간 반영 히스토리 날짜별로 완료한 투두리스트 확인 데이터베이스 연동 주요 코드 내용 오늘의 투두리스트 const [todos, setTodos] = useState([]); const [complete, setComplete] = useState(true); // axios 호출 성공시 true const [attain, setAttain] = useState(0); // 달성한 todo 개수 const [checked, setChecked] = useState(false); const day = dayjs(..

리덕스란? 자바스크립트 상태 관리 라이브러리 리덕스가 왜 필요할까? 프로젝트 규모가 커질 수록 컴포넌트 개수도 많아질 것이고 그에 따라 서로 다른 컴포넌트끼리 공유하는 상태(state) 또한 많아진다. 리액트는 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르는 단방향 패턴이며 자식 컴포넌트들 간 다이렉트로 데이터 전달이 불가능하다. 리액트만으로 상태를 관리할 때 문제점 Props drilling 이슈 하위 컴포넌트에서 상위 컴포넌트에 있는 상태를 변화시키기 위해서는 여러 번의 props 전달을 통해야 한다. 전달만을 위한 props가 생기기 때문에 코드가 복잡해지고 유지보수가 어려워지며, 불필요한 리렌더링이 많아지는 단점이 있다. 리덕스를 이용할 때 이점 리덕스를 이용하면 Store라는 전역 상태 저장소..