한입크기리액트

React는 Component 기반의 UI 라이브러리절차를 하나하나 다 나열해야함.그냥 목적을 바로 말함.예를 들어 5번 업데이트를 해야할 경우, 한번만 업데이트해서 사용 할 수 있다.

JSX에서는 모든 태그를 닫아줘야 한다.최상위 태그 규칙return 하려면 최상위 태그 하나로 묶어줘야한다.만약 최상위 태그를 아무거나 넣고 싶지 않다면, React.Fragment를 써준다. React.Fragment 귀찮다면, ' <></>' 이런 빈 태

DiaryEditor.js동작 방식이 같음으로, 묶어줄 수있다.(요소가 길어질 수 있기 때문에 스프레이 연산자 사용.)

버튼 클릭시 작성자, 본문 내용 글씨 개수 체크하여, 원하는 글자 수 미만이면, alert 띄우기alert 창 대신 조건에 만족하지 못하면, 해당 항목(input, textarea) focus 추가하기element 돔요소에 접근 할 수 있게 해준다.

바로 만드는 것은 힘듬으로, dummyData를 생성해주어, 일기를 전달해보자.전달할 dummyList를 만들어준다.App.js리스트로 나열될 DiaryList에 데이터를 전달해준다DiaryList.js배열을 리스트로 렌더링하기.여기서 만약, dummyList로 넘겨준

리액트에서는 같은 레벨끼리 데이터를 주고 받을 수 없다.리액트는 단반향 데이터 흐름이다.데이터를 끌어올려, 부모요소 App 에서 데이터를 내려받고 올려주고 하면된다.기존에 dummyList를 주석 처리를 해놓고, 진짜 데이터를 만들어서, DiaryEditor, Diar

일기 리스트에 삭제하기 버튼 만들어주기 DiaryItem.js 실제로 삭제를 하려면, data의 값을 변경해줘야한다. 삭제버튼을 누른 값을 제외한 배열을 새로 만들어줘야한다. App.js DiaryList.js App.js

DiaryItemisEdit으로 수정중인지 아닌지, true/false로 구분하여수정 중일때는 textarea를 표시하고, 아니면 content의 값(내용)을 보여주게한다.(삼항연산자 사용)data의 값을 변경해주어야 하기때문에, App.js에서 작성해주어야한다.App

Lifecycle.jsuseEffect 의 \[] 빈 배열을 전달하면, 처음생성 마운트된 시점에만 작동이됨으로, 값이 바뀌더라고 (리렌더되더라도) 아무 동작도 하지않는다.useEffect 의 아무것도 전달하지않으면, 상태가 변화할때마다 Update가 출력되게 된다.co

App.js가지고온 api를 20개를 짤라서 각각 항목에 넣어주고, setData에 담아준다.

Memoization 이미 계산 해본 연산 결과를 기억 해 주었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해 두었던 데어터를 반환 시키게 하는 방법

함수형 컴포넌트에 업데이트 조건을 걸자.로직을 재사용하기위한 React의 고급 기술이다.구체적으로, 고차첨포넌트는 컴포넌트를 가져와서 새 컴포넌트에 반환하는 함수입니다. (매개변수로 컴포넌트를 전달한다.)매개변수에 똑같은 prop을 받으면 리렌더링을 하지않는다.Opt

DiaryEditor React.memo로 감싸주어야하는데 DiaryEditor 기능을 한 함수들이 길기 때문에 이럴 경우에는 제일 하단에 export default 부분에 React.memo를 감싸주면된다.렌더링 되는 부분을 확인해보자.렌더링이 2번발생한다. App.

일기리스트를 삭제하면 전체 일기 리스트들이 리렌더링되어진다.일단 어떤 값이 리렌더링 되어지는지 알아보자.onRemove, onEdit 값은 data가 바뀌면 리렌더링되는 값이다.그래서 App.js에 가서 기존방식과 동일하게 onRemove, onEdit을 최적화해주자.

컴포넌트에서 상태변화 로직을 분리하자.첫번째 count 기존의 사용했던 state두번째 dispatch 상태를 변화시키는 actionreducer dispatch 상태변화함수를 처리하는 로직1 count state의 초기값이다.기존에 작성했던 useState는 주석처리

DiaryStateContext 내보내주어야 다른 곳에서 쓸 수 있다.export default는 파일 하나의 하나만 쓸 수 있다.그래서 export만 써주면 여러 개를 쓸 수 있다.Provider 컴포넌트로 랩핑을 해준다.value={data} 이런식으로 값(데이터)

어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정(경로의 정해주는 행위)데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말요청에 명시되어있는 경로에 따라서 알맞은 페이지를 선택하게

react-router-dom 설치 이동할 page 만들기 pages폴더에 page를 만들어준다. Home.js 페이지 라우팅하기 BrowserRouter 감싸져있는 부분들은 브라우저의 url과 맵핑될 수 있다. 바뀔부분을 Routes로 감싸준다. Route -

Parth Variable

App.cssApp.css감정 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경셋팅App.jsprocess.env.PUBLIC_URL 어떤 위치에있던지 assets 폴더를 가리키게된다.(assets 폴더 경로를 가리키게된다)만약 제대로 나오지않는다면, 하단처럼 넣어주

App.js