기록하고 싶은 것들

Stackblitz 사용하여 개발 환경 구현 react redux 설치 방법 redux와 react-redux 설치 npm install redux react-redux 기존 react 사용 시 컴포넌트 안에 컴포넌트가 중첩 되어서 사용 할 때 props의 연쇄적 연결이 필요, 마치 유선으로 이어진 것과 같음 하지만 redux 사용 시 redux의 store 중심으로 컴포넌트 끼리 직접 연결 가능 provider : state를 어떤 컴포넌트에 적용할지 정의 useSelector : 어떤 state 값을 선택할지 정의 useDispatch : state값을 변경 시킬 때 사용 connect : 재사용성을 높이기 위해서는 필요하지만 사용하기 어려움

Delete는 누르자마자 삭제를 하면 안되기 때문에 링크 대신 버튼 사용 App.js import logo from './logo.svg'; import './App.css'; import {useState} from 'react'; //state 사용 function Header(props){//컴포넌트 생성(대문자로 시작) return { //event객체를 첫번째 파라미터로 event.preventDefault(); //태그 의 기본동작 방지-> reload 되지 않게 props.onChangeMode(); // alert 호출 }}>{props.title} } function Nav(props){ const lis =[] for(let i=0; i{t.title}) //lis에 하나씩 넣기, 동적..

Update는 Create와 Read를 합친 난이도 있는 작업 function Update(props){ const [title, setTitle] =useState(props.title); //props에 들어온 title에서 state로 const [body, setBody] =useState(props.body); return Update { event.preventDefault(); const title = event.target.title.value; //event target은 form 태그 지칭 const body = event.target.body.value; props.onUpdate(title,body); }}> {//state를 value값으로 줌 setTitle(event.targe..

대부분의 어플리케이션은 CRUD 기능을 가지고 있으며 지난 강의까지는 Read를 구현했다. 지금부터는 Create를 구현해보자 state를 만들 때 원시 데이터 타입이라면 기존 방식대로 생성하면 된다 하지만 객체,배열 같이 범 객체 안에 들어간다면 처리 방법이 달라진다. 데이터를 복제 후 복제 본을 변경한다. 그 후 setValue에 newValue를 넣어주면 component가 다시 실행된다. 여기서 핵심은 오리지널 데이터를 건들지않고 복제본을 변경하는 것이다. why? React는 오리지널 데이터와 새로 들어온 데이터가 같은 데이터인지 확인 후 같다면 component를 재실행 하지 않음 위) 객체 타입일 때 state 생성 예시 아래) 원시 타입일 때 state 생성 예시 App.js import ..

prop과 state의 차이점 prop은 component를 사용하는 외부자를 위한 데이터 state는 component를 만드는 내부자를 위한 데이터 App.js import logo from './logo.svg'; import './App.css'; function Header(props){//컴포넌트 생성(대문자로 시작) return { //event객체를 첫번째 파라미터로 event.preventDefault(); //태그 의 기본동작 방지-> reload 되지 않게 props.onChangeMode(); // alert 호출 }}>{props.title} } function Nav(props){ const lis =[] for(let i=0; i{t.title}) //lis에 하나씩 넣기, 동..

component의 이벤트 기능 넣기 onChangeMode prop에 함수 호출 App.js import logo from './logo.svg'; import './App.css'; function Header(props){//컴포넌트 생성(대문자로 시작) return { //event객체를 첫번째 파라미터로 event.preventDefault(); //태그 의 기본동작 방지-> reload 되지 않게 props.onChangeMode(); // alert 호출 }}>{props.title} } function Nav(props){ const lis =[] for(let i=0; i alert('Header'); }}> ); } export default App; 해당 코드 변경 후 WEB 클릭 시..

props는 component의 외부에서 사용하는 입력 값 App.js import logo from './logo.svg'; import './App.css'; function Header(props){//컴포넌트 생성(대문자로 시작) return {props.title} } function Nav(props){ const lis =[] for(let i=0; i

App.js import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html css js Welcome Hello, WEB ); } export default App; 서로 연관된 것을 모아서 이름 붙이기 복잡한 태그를 하나로 묶어서 사용자 정의 태그 만들기 React에서 사용자 정의 태그를 만들 때는 대문자로 시작 React에서는 사용자 정의 태그를 Component 로 지칭 Component 적용 예 import logo from './logo.svg'; import './App.css'; function Header(){//컴포넌트 생성(대문자로 시작) return WEB } function Nav(){ ret..

index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // App.js 파일로 부터 App 태그가 왔음을 나타냄 import reportWebVitals from './reportWebVitals'; ReactDOM.render( //오른쪽 동작 UI , document.getElementById('root')// id값이 root인 태그로 렌더링 되라는 코드 ); App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Hello React! // 원래 내용..

온라인 플레이 그라운드 개발 환경을 설치할 필요가 X ex) stackblitz 바로 실행 가능 추천 툴 체인- 수업에서 배우는 모든 환경을 기본적으로 제공 그 중 create-react-app 사용 터미널에서 명령어 사용 npx create-react-app my-app npx를 사용하려면 node js 설치 둘 중 원하는 버전 설치 npx create-react-app . VS 터미널에 명령어 입력 npm start 입력 시 샘플 애플리케이션 생성