우롱이 공책정리

함수 : rsf import React from 'react'; const CompCount = () => { return ( ); }; export default CompCount; rsc import React from 'react'; const CompLast = () => { return ( ); }; export default CompLast; rcc import React, { Component } from 'react'; class CompBodyClass extends Component { render() { return ( ); } } export default CompBodyClass;

리액트의 철학은 값을 set할때 this.setState로함 스프링의 rootPath라 보면됌! 우리는 원래 컨텍스트라고 하지만 리액트에서는 proxy라함 왜냐하면 리액트에서 context라는 애가 따로 또 있어서! >> package.json 프롭스로로 전달받은거는 항상 ReadOnly여서 리액트라우터돔에있는 링크라는 컴포넌트를 가져다가 쓰는 것 : a태그와 비슷함!! >> BBsNav.jsx

react-bbs 화살표 함수가 아니라 function으로 함수를 사용하면 this 가 애매해져버린다. 그래서 화살표 함수로 쓰라고 권장하는 중!! this.가 가르키는 곳이 파일이 될수도 있고 해서 화살표 함수를 쓰면 this가 명확해진다! Node_bbs_server ejs : 인베디드 자바스크립트 jsp : java Server page Html + java코드를 인베디드한 친구 자바코드로 다시 변환되고 클래스형식으로 만들어짐 톰캣이 이 일을 대신함 노드몬의 스타트 파일 제일먼저 실행이 된다. >> packege.json 이게 열리는거임 >> app.js require는 import라고 생각해도 무관! http : html 문서를 인터넷으로 주고받을때 사용하는 프로토콜(통신규약) , 웹에서 사용하는..

리액트에서 div태그라 하지않고 div 컴포넌트라 부름 yarn add moment 가져올때 yarn add react-moment도 같이해야함 (리액트에서 moment사용할수 있게 해주는 디펜던시!) /** * LifeCycle Method * React의 Class type Component에는 여러가지 내장 method가 있다 * 데이터의 변화가 발생하면 정해진 순서에 따라 * 내장 method가 실행되면서 화면을 rendering한다 * 이러한 method들을 Life Cycle Method라고 한다 */ componentDidUpdate; // 렌더링이 이루어진 다음에 호출되는 메서드

phone-book-v2 각 태그들에 들어있는 문자열이나 데이터들을 뽑아내는 방법 tr태그에서 클릭이벤트가 발생하는게 아니라 품고있는 td태그들이 실행됌 tr의 0번노드에 있는 td의 문자열을 뽑아서 name이라는 변수에 저장함 id 는 datai-id라는 값을 추출하는 방법 tr태그의 data-id의 value를 추가해서 id에 담은것! 데이터를 뽑아내는 방법!! reducer에 보내고 여기서 받고 state 변수에 보냄! >> PhoneList.jsx 제일 중요한 개념은 use로 시작되는 함수 (HOOK 함수라고도 함) todo-list rcc(클래스타입!)는 component를 상속받아서 사용해야함! render라는 method가 return문을 감싸고 있고 class로 시작하고 반드시 compon..

오브젝트 안에 있는 input태그는 object에 담김 name, number는 action에 담기고 action name 에는name이 담기고, action name 에는 number도 담길거임!! 저 value랑 name이 action에 담기는거 >> PhoneList.jsx

map을 이용해서 인덱스를 이용하고자 할 때 key라는 값이 반드시 존재해야한다!! >> PhoneList.jsx 화면이 자주바뀌고 깜빡이는 현상은 웹 접근성에 위배 되기 때문에 미디어쿼리 넣어줌 애니메이션 변화하는걸 줄이는 부분 >> App.css useEffect(() => { // 추가된 데이터가 있으면 전체 phoneBooks를 브라우저의 localStorage에 저장 // 1. 배열 데이터를 문자열화 시키기 const stringPhoneBook = JSON.stringify(phoneBooks); // 2. localStorage에 phoneBooks라는 이름으로 저장하기 window.localStorage.setItem("phoneBooks", stringPhoneBook); }, [phon..

함수자체를 얘한테 전달함 use레퍼런스는 커런트라는 속성이 생겨서 seq, id값을 만들어 낼수 있음 최초 값은 4 클릭될때마다 5,6,7... 이렇게 늘어나! ref는 렌더링이 안되고 state변수를 함부러 +-하면 state변수는 렌더링이 되어 화면이 계속 바꾸기 때문에 서버가 멍충이가 될수 있움 >> PhoneMain 여기에서 매개변수로 받을 거임 onClickSave라는 함수를 Main에서 선언하고 onClickSave함수의 실제 사용은 Insert 컴포넌트에서 실행하는것 이러한 패턴을 facade 패턴이라고 한다. 보통 변수 만든곳에서 사용하지만 파사드 패턴은 선언과 사용하는곳이 분리되어있음 prop변수(매개변수)는 readon 변수가 됌. 읽을수만 있지 변경이 되지않는다. 메인에서 state라..

HELLO-REACT index.js는 public 폴더에있는 index.html 의 div를 불러온당 필요한건 저거하나 ! index.js를 건들지 않음 이app만 건들일것! 리액트 폴더에 들어와서 yarn start 하면 서버가 열림! 이거 설치해줌 rcc 컨트롤 스페이스 바하 하고 첫번째 꺼 선택해주면 이렇게 뜬다 이게 리액트의 컴포넌트 스타일! >> app.js 이코드가 없으면 아무리 코드를 짜도 사용할 수가 없음 이 컴포넌트를 사용할 수 없음 >> rccp.jsx 사용하려면 app.js에 import로 해서 그 component를 사용할 수 있고 첫글자를 대문자로 만들어야함 우리는 전부다 대문자하긴했지만. 우리가 대문자로 만드는 이유는 기본적으로 제공하는 컴포넌트와 헷갈리지마라고 우리가 만드는 ..