프론트엔드 가보자GO 프론트엔드 가보자GO

💡두가지 형태의 모달창 만들기 모달버튼 A : 닫기, 확인버튼이 있고, overlay를 클릭했을 때 모달이 닫히지 않는 형태 모달버튼 B : 닫기 버튼만 있고, overlay를 클릭했을 때 모달이 닫히는 형태 css는 styled-components 적용 👉모달 상태 설정하기 const [isModalA, setIsModalA] = useState(false); const [isModalB, setIsModalB] = useState(false); 1. useState 훅을 사용하여 isModalA와 isModalB라는 두 개의 상태를 설정한다 2. 초기값으로 false가 설정 ▷boolean 값 설정이유 : 모달이 열려있는지를 나타낸다 👉모달 열고 닫는 이벤트 추가 //Modal A const open..

📌React Router Dom란? : 페이지를 구현할 수 있게 해주는 패키지 ex) https://www.tistory.com/ ( / 뒤에 오는 주소가 route) 👉 패키지 설치 명령어 yarn add react-router-dom 👉 React Router Dom 순서 1. 페이지 컴포넌트 생성 → 다중 페이지 src폴더 > pages폴더 > ex)Home.jsx , About.jsx, Work.jsx 2. Router.js 파일 생성 , router를 구성하는 설정 코드 작성 src폴더 > shared폴더 > Router.js 3. App.jsx에 import 및 적용 👉코드 작성법 1. 페이지 컴포넌트 생성 → 다중 페이지 src폴더 > pages폴더 > ex)Home.jsx , About.j..

📌Redux란? : 를 사용할 수 있게 도와주는 패키지(라이브러리) 리덕스는 전역상태 관리 라이브러리 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성 useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다. ✅ 리덕스를 사용하면State를 공유하고자 할때 부-모 관계 컴포넌트를 거치지 않아도 된다. ▷컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 👉 리덕스 설치 명령어 yarn add redux react-redux 👉리덕스 설정 순서 1. 리덕스 패키지 설치 2. 폴더구조 생성 src폴더 > redux폴더 >config, modules 폴더 3.파일 생성 ㆍconfig 폴더 > co..

🤓오늘 공부한 내용 📌useState 기본 적인 hook 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 형태 : const [state, setState] = useState(초기값) ⇒ [state, setState] 는 useState가 return하는 값이 배열이고, 그 배열을 구조분해할당으로 받은 것 👉setState를 사용하는 방식 // 기존에 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); ▷함수형 업데이트 방식 ( )안에수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성 // 함수형 방식 예시) // 현재 number의 값을..

📌CSS-in-Js방식 : 자바스크립트 코드로 css 작성 → 컴포넌트 꾸미기 가능 (styled Components 패키지 사용) *이전 스타일링 방식 : 컴포넌트 생성→ css파일 생성 후 import → html태그마다 className부여→ 작성 👉styled-components 사용방법: VScode-styled-components 플러그인 설치→ vscode 터미널 (yarn add styled-components) 패키지 설치 →styled import 👉styled-components 사용 예시) import "./App.css"; import { styled } from "styled-components"; //import 필수 const StBox = styled.div` width: ..

💻구현해야 할 기능 Todo 완료 상태 변경하기 (완료 ↔ 진행중) ▷Todo의 isDone 상태가 true : 버튼의 라벨을 취소 isDone 상태가 false : 완료로 조건부 렌더링해야함 ▷Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현 🤓오늘 공부한 내용 📌Todo 완료,취소버튼 추가하기 1. Todo의 상태에 따라 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현하기 위해 📌Working섹션에는 완료버튼을, ✅Done섹션에는 취소 버튼을 추가해줘야한다. 2. 완료,취소 버튼을 클릭하면 수행하는 함수 추가 👉clickChangeButtonHandler 버튼핸들러는 해당 Todo 항목의 isDone 상태를 토글하는 역할 ("토글"..

🤓오늘 공부한 내용 📌Todo 추가하기 1. 추가하기 버튼 const clickAddButtonHandler = () => { const newTodo = { id: todo.length + 1, title, content, }; setTodo([...todo, newTodo]); //다시 빈 값으로 바뀌도록 구성 setTitle(""); setContent(""); }; event를 인자로 받는다 이벤트핸들러를 따로 변수로 할당해주기 리스트 추가하는 방법 title state와 content state를 엮어서 state를 하나 더 추가해주기 새로운 형태의 변수를 만들어서 (todo state)배열에 더한다 id: todo.length + 1 ⇒ todo가 원래 갖고있던 length에 +1 state에..

💻구현해야 할 기능 UI 구현하기 Todo 추가 하기 Todo 삭제 하기 Todo 완료 상태 변경하기 (완료 ↔ 진행중) 🤓오늘 공부한 내용 react파일을 설치하는 방법이 두가지가 있는데 git bash에서 yarn을 설치하는 방법도 있지만 이번에는 터미널에서 설치하는 방법을 사용해보고자 'npx create-react-app (파일이름)' 명령어를 이용해서 설치했다. 파일을 설치해주고 난 후 App.js에서 기존에 있던 컴포넌트 부분을 지워서 준비해준다. 📌Todo List페이지의 기본 뼈대 먼저 세팅 const App = () => { return ( My Todo List React 제목 내용 추가하기 📌Working ✅Done ); }; 페이지의 타이틀 todo 리스트를 추가하기 위한 입력창 생..