💎 TodoList 3️⃣ - TodoList 3️⃣ 에 이어서 진행하는거라 참고하자! [ React ] TodoList3️⃣ 로그인/로그아웃 💎 React code 📣 App.js - Login 처리를 위한 컴포넌트를 생성해주고 improt를 진행한다. - export const TodoListContext = createContext() : export 내보내기를 통해 TodoListContext를 전역변수로 사용하겠다!! : ContextApi mungwang.tistory.com 💎 App.js - {loginMember && ()} : 로그인멤버가 담겨있으면 TodoList컴포넌트를 실행할거다. import React, { useState, createContext } from 'react'; ..
React
💎 React code 📣 App.js - Login 처리를 위한 컴포넌트를 생성해주고 improt를 진행한다. - export const TodoListContext = createContext() : export 내보내기를 통해 TodoListContext를 전역변수로 사용하겠다!! : ContextApi를 이용해서 자식컴포넌트에게 담아준 3개의 값을 사용할수있게한다. import React, { useState, createContext } from 'react'; import './App.css'; import SignupContainer from './Signup'; import Login from './Login'; export const TodoListContext = createContex..
💎TodoList 1️⃣ ↓ 밑에 회원가입이후 추가된거니까 2️⃣를먼저 보지말고 1️⃣을 먼저봐야한다!! [ React ] TodoList 서버 연결 1️⃣ 💎 Todo-list + Spring [ React ] TodoList 2️⃣ 1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!! 💎 TodoList li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으 mungwang.tistory.com 📣 App.js - App.js같은경우에는 변한게 없다 기능적인 부분에 추가이기때문! import React, { useState, createContext } from 'react'; impor..
💎 Todo-list + Spring [ React ] TodoList 2️⃣ 1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!! 💎 TodoList li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으로 key값을 넣어줘야한다!! - 각 엘리먼 mungwang.tistory.com npx create-react-app todo-list : todo-list 폴더를 생성해준다. React 주소는 localhost:3000이고 Spring은 localhost:8080 이기 때문에 proxy를 사용하여 동기화시켜줘야한다. 만든폴더안에 .env 환경설정할수있는 파일을 만든후 PORT=80 으로..
💎 Context API 📣 createContext - ContextAPI를 사용하기위해 전역변수로 쓸수있는 컴포넌트를 하나만들어준다!! import React, { createContext } from 'react'; // createContext(초기값) : Context 생성 const UserContext = createContext(); export default UserContext; 📣 Context API 실습 - import를 2개해주는데 하나는 기본적으로해줬던 import에서 useContext를 사용할거기때문에 추가해주고 ↑ 위에서 만들어준 UserContext도 import해준다. import React, { useState , useContext } from 'react'; im..
1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!! 💎 TodoList li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으로 key값을 넣어줘야한다!! - 각 엘리먼트에 안정적인 고유성을 부여하기 위해서 key 값을 써야한다. - 고유성을 통해서 React가 이름이 똑같은 컴포넌트를 각각의 항목을 변경, 추가 또는 삭제할지 식별 한마디로 ** key값을 지정해주지않으면 변화한값만 리렌더링되야하는데 전체가 리덴더링되게된다!! ** - 체크박스에 기본 cheked = 속성은 체크가되었을때는 true , 체그가 안되어있을대는 false 값을 가지고있다. 💥 배열.map( (배열요소,인덱스) ..
💎 TodoList - useState : 리액트에서 가장많이쓰는 상태 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데 - const newTodos [ ...todos,newTodo ] : 전개구문을 사용하여 todos 2개객체와 newTodo에 입력되어 생성되는객체를 합쳐준다. 전개변수(참고)--> https://mungwang.tistory.com/entry/React-1 import React, { useState } from 'react'; // useState 복습 const InputName = () => { // state : 컴포넌트의 상태 // useState : 컴포넌트의 상태를 관리 // -> state 변화가 감지되면..
🔔 State lifting up 상태 끌어올리기 : 상태 끌어올리기 React에서는 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 변경할 수 없습니다. 따라서 React에서는 하위 컴포넌트에서 발생한 이벤트를 상위 컴포넌트에서 처리하도록 하는 상태 끌어올리기 패턴을 사용합니다. 💎 State - const Id = ({handler}) : 여기에서 props == handler 는 const StateLiftingUp 에서 보내준 함수이다 -> { // id값을 변경 함수 setId(e.target.value); } - const id 에서 input에 onChang이벤트를 적용해서 값을 입력하면 상위컴포넌트에서 보내준 함수가 실행되어 const [id, setId] = useState(""); 초기값이..
💎 State 📣 App.js import State1 from './components/R02_state1.js'; import State2 from './components/R03_state2.js'; function App() { return ( Hello React!! 리액트 배운다~ ); } export default App; 📣 R02_state1.js 🩸 컴포넌트 시작이름은 항상 대문자!! 🩸 리액트는 컴포넌트의 상태가 변할 때 마다 리렌더링을 수행함 ( 예전버전에서는 전체를 리렌더링했었는데 요즘 버전부터는 개선되서 바뀌는 그부분만 리렌더링된다 ) ★★ const [ 변수, 함수(개발자가만든이름) ] = useState("초기값") == useState를 사용하는 고정구문 ★★ import ..
💎 props 🥊 전개구문 - 전개구문을 사용하면 배열이나 문자열과 같이 반복가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 (배열 리터럴의 경우)로 확장하여,0개 이상의 키-값의 쌍으로 객체를 생성할수있다. ** 객체 형태도 가능하다 ** 📣 App.js - App.js : react로 만든 화면을 띄어주는 파일 import 변수명(아무거나) from './components/R01_props.js' == './components/R01_props.js' 여러 요소를 반환하고 싶..
