오늘은 아이디중복 검사를 진행해보자. 관련되어 이전 내용을 참고 하고 싶다면 아래 포스팅을 확인하고 오자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습 jnaa.tistory.com [ React ] 회원가입 ( 로그인 / 로그아웃 ) ② 오늘은 이어서, 회원가입 시 로그인 / 로그아웃 및 아이디 중복 검사를 구현해보자 먼저 로그인/ 로그아웃 먼저 구현하기로 하자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 jnaa.tistory.com 📚 React 📘 App...
ON/React
오늘은 이어서, 회원가입 시 로그인 / 로그아웃 및 아이디 중복 검사를 구현해보자 먼저 로그인/ 로그아웃 먼저 구현하기로 하자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습 jnaa.tistory.com 📚 React 📘 App.js import React, { useState, createContext } from 'react'; import './App.css'; import SignupContainer from './Signup'; import Login from './Login'; export..
이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습하고 싶다면 아래 포스팅을 확인해보자! [ React ] TodeList 실습하기 ⑤ 오늘은 TodoList를 만들어 볼 것이다. 내가 할일을 작성하고 추가하면, 아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 📘 APP.js 1. components jnaa.tistory.com 🤔 실습하기 앞서 세팅하기 ① 터미널에 npx create-react-app todo-list : todo-list 폴더를 생성해준다. ② DB 세팅 ③ Spring..
📝 Context API 이란 ? Context API는 React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지 할 수 있습니다. 부모 자식1 자식2 자식3 자식4 자식5가 있다면 자식5만 값을 가지고 싶은데, 자식1 ~ 자식5까지 모두 받아야하기 때문에 매우 불필요하기때문에 context api를 이용하자 🤔 Context API 사용하기 contexts폴더에 새로운 js 만들기 createContext 함수사용해서 객체 만들기 이후 Context.Provider 컴포넌트를 이용해서 데이터 전달 데이터는 Provider는 value prop을 이용 이 개념을 가지고 오늘 만들어 볼 ..
오늘은 TodoList를 만들어 볼 것이다. 내가 할일을 작성하고 추가하면, 아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 📘 APP.js 1. components 폴더의 components/R05_todolist1.js를 사용 import TodoList1 from './components/R05_todolist1'; 2. TodoList1으로 불러오기 function App() { return ( {/* R05_todoList1 */} ); } export default App; 📘 R05_todolist1.js const TodeList1 = () => { // 할일을 저장할 변수 // -> 상태가 변하면 컴포넌트 (TodeList1)을 리랜더링 c..
🤔💬 props - 금수저 부모 - 부모가 자식한테 값을 준다 ! 쉽게 생각하고 싶어 '금수저부모'라고 생각하기로 했다. 🤔💬 state lifting up - 자수성가 ❗ 자식이 부모한테 값을 전달 할 수 있도록 하는 것이다 ! (자식 값이 변함으로서 부모가 값이 바뀐다!) React에서는 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 변경할 수 없습니다. 따라서 React에서는 하위 컴포넌트에서 발생한 이벤트를 상위 컴포넌트에서 처리하도록 하는 상태 끌어올리기 패턴을 사용합니다. prop와 다르게 자식이 부모한테 값을 주니 ! '자수성가' 라고 생각하기로 했다. 📘 APP.js 1. 서버 연결을 위해 APP.js에 import 해주고, import 해줄때 별칭을 넣어준다. /* import logo f..
❗ 컴포넌트 이름은 대문자 ! ❗ 리액트는 컴포넌트 상태가 변할때 마다 리렌더링 수행! 🤔💬 Props ❗ Props 부모 -> 자식 데이터 전달 가능! (역방향 불가!) Props는 React 컴포넌트에게 데이터를 전달하는 방법 중 하나입니다. Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되며, 컴포넌트 내부에서 변경할 수 없 는 읽기 전용 데이터입니다. Props를 사용하면 컴포넌트 간의 데이터 전달이 간단하고 유지보수하기 쉬워집니다. 또한 컴포넌트의 재사용성을 높일 수 있습니다. Props가 뭔지 알아봤으니 직접 실습을 해보자 ! ◾ 실습하기전 파일 만들기 📚 VS code 📘 APP.js /* import logo from './logo.svg'; */ import './App.css'; ..
🤔 클래스형 컴포넌트 js 폴더를 만들때에 대문자로 작성해야한다 (Exam1.js) Component 상속 받기 render () 함수 작성하기 (필수) 만든 class를 export deault 지정하기 🤔 함수형 컴포넌트 js 폴더를 만들때에 대문자로 작성해야한다 (Exam2.js) 함수 설정하기 return 구문에 출력하고자 하는 html 코드 작성 만든 함수를 export default 지정하기 ➰ 클래스형 컴포넌트 만들기 📘 Exam1.js ◾ js 폴더를 만들기 ◾ Component 상속 받기 ◾ render () 함수 작성하기 ( 필수 ) ◾ 만든 class를 export deault 지정 📘 App.js ◾ components 폴더의 Exam1.js를 가져와서 사용을 이름 지정 후 작성해주..
