마이라이프해피라이프

1. React.memo를 통한 컴포넌트 리렌더링 방지 2. useReducer reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다. useReducer 의 사용법은 다음과 같습니다. const [state, dispatch] = useReducer(reducer, initialState); 여기서 state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생..

1. useEffect useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다. 주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다. props 로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청 (REST API 등) 라이브러리 사용 (D3, Video.js 등...) setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약 그리고 언마운트 시에 하는 작업들은 다음과 같은 사항이 있습니다. setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterv..

1. map map 은 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어집니다. forEach를 사용하면 array.forEach(n => { squared.push(n * n); }); map을 사용하면 const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); const squared = array.map(n => n * n); console.log(squared); 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하시면 됩니다. {users.map..

1. 리액트 컴포넌트를 만들 땐 import React from 'react'; 를 통하여 리액트를 불러와주어야 합니다. 2. 코드의 최하단 export default Hello; 이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미입니다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있습니다. 3. JSX JSX 는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 입니다. 불필요한 div 로 감싸는게 별로 좋지 않은 상황도 있습니다. 예를 들어서 스타일 관련 설정을 하다가 복잡해지게 되는 상황도 올 수 있고, table 관련 태그를 작성 할 때에도 내용을 div 같은걸로 감싸기엔 애매하죠. 그럴 땐, 리액트의 Fragment ..

1. 이벤트 처리하기 Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. -> event 받아서 event.preventDefault() 2. map const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2);console.log(doubled); const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number}); 3. key 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장..

# crud 학습 복제본을 바꾼다 newValue = {...value} -> value 복제 newValue 변경 netValue(newValue) 같은 데이터라면 렌더링하지 않음 update = create + read 원하는 화면에서만 나타내게 해주기. 기본 null로 주고 조건문 안에서 변수에 tag 할당 {} 변수 보여주기 -끝- props는 어명같은 거! props에서 state로 환승 -> onChange로 값을 바꾼다. 꼭 복습하기 ! 10번 잊으면 다음에는 기억한다 다음 강의 - redux https://www.youtube.com/watch?v=Jr9i3Lgb5Qc&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc

# 노트 리액트 핵심 => 사용자 정의 태그 만들기 문법 2개 class vs function 요즘은 function으로 만드는게 흔함. (예전 수업을 찾아보면 class 방법 배울 수 있음) npm start -> 3000번 포트에서 브라우저 실행 src 폴더 안에 index.js = 입구 파일 index.js를 받고 이 안에 있는대로 동작하게 됨 npm run build -> build 폴더가 생성됨 npx serve -s build -s 옵션: 사용자가 어떤 경로로 들어오든 간에 index.js 파일 서비스해줌 build 파일 안의 index.js 서비스해줌 react에서 사용자 정의 태그를 만들 때는 반드시 대문자로 시작해야 핢 사용자 정의 태그라는 표현 대신 컴포넌트라는 표현을 사용함. 컴포넌트..

1. camelCase JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다. 2. 객체 표현 const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 3. 엘리먼트 엘리먼트는 React 앱의 가장 작은 단위 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. React 엘리먼트를 루트 DOM 노드에 렌..

글 작성 페이지, 글을 확인할 수 있는 페이지, 홈 페이지를 분리하는 부분을 구현했다. (지금 생각해보니 홈 페이지에서 글을 확인할 수 있도록 할 거라 따로 홈 페이지는 필요 없을 것 같다.) 리액트에서는 페이지를 이동할 때 a 태그를 사용하지 않는다. 리액트는 Single Page Application (SPA)라는 특징을 가지고 있는데 이는 페이지가 하나인 어플리케이션이란 의미이다. 따라서 페이지 이동은 불가능하고 주솟값에 따른 화면을 만들어 보여준다. 이때 주소마다 다른 화면을 보여주는 것을 라우팅(routing)이라 한다. ✅우선 Route를 시용하기 위해 npm install react-router-dom 을 해준다. (알아서 잘 설치될 것) npm install react-router-dom ..

기본 파일 삭제 ✅Public dir안의 파일 favicon.ico index.html 파일을 제외하고 삭제 ✅Src dir안의 파일 App.css App.js index.css (선택) index.js 제외하고 삭제 다음에 프로젝트할 땐 헤매지 않아야지.