[InfLearn] 처음 만난 React

리액트란? 리액트의 장점 빠른 업데이트와 렌더링 속도 Virtual DOM 가상 DOM (Document object model) DOM에는 웹사이트 정보를 모두 담고 있음 기존 방식에선 DOM을 직접 수정해야 하지만, React는 업데이트 해야할 최소한의 부분

매번 직접 연동 할 수 없다.npx = npm 패키지를 바로 실행, execute 까지 해주는 명령어간편하게 한번에 처리하기 위해 사용한다.y를 누르자.간단하게 명령어들을 알아보자npm start를 했을 때 강의에서는 잘 실행되지만, 내 컴퓨터에선 실행되지 않고에러가

JSX는 react 개발에 필수적으로 사용된다.자바스크립트의 확장 문법그럼 어떻게 확장한 문법일까? -> JS + XML / HTML JSX는 내부적으로 XML,HTML코드를 JS코드로 변환하는 과정을 거치게 된다.우리가 JSX를 작성해도 최종적으로는 JS코드가 나오게

React 앱을 구성하는 가장 작은 블록들을 엘리먼트 라고 한다.엘리먼트는 우리가 화면에서 보는 것들을 기술하는데, 기술한 내용을 토대로 실제 화면에서 보이는DOM 엘리먼트가 만들어지게 된다.React 엘리먼트는 JS 객체 형태로 존재하고, 한번 생성되면 바꿀 수 없다

chapter_04라는 디렉토리를 만들고 그 안에 Clack.jsx를 생성index.js 수정 4:8라인 ./App 옆에 // eslint-disable-line no-unused-vars 추가 해주니 해결되었다.

react는 component로 구성되어 있고, components는 또 다른 component로 구성될 수 있다.블록을 조립하듯, 컴포넌트를 모아서 새로운 components를 만들 수 있다.작은 component들이 모여 component를 구성하고 또 그 comp

stateJavascript 하나의 객체react Component의 상태를 의미하는데, 정상인지를 나타내는게 아니고 data에 더 가깝다.react Component의 변경 가능한 data를 state라고 부른다.사전에 정해진 것이 아니라 state (data)를 개

chapter_06 디렉토리 생성,Notification.jsx 생성뭔가 잘 이해가 안간다.흐름이 정말 중요하니 이해하고 넘어가자.

Hook 이란?component에는 2가지 종류가 있다.1.Function Component // state 사용 불가, lifecycle에 따른 구현 불가2.Class Component // 생성자에서 state 정의, setState를 통해 update, li

ConfirmBurtton.jsx함수 컴포넌트로 이벤트 처리인데, 화살표 함수가 너무 익숙하지 않아 알아보기 힘들었다.클릭 후

조건부 렌더링 - 어떠한 조건에 따라서 렌더링이 달라지는 것예를 들어 아래와 같은 truthy는 true는 아니지만 true로 여겨지는 값 falsy도 false는 아니지만 false로 여겨지는 값조건부 렌더링을 사용하다 보면 렌더링 해야할 컴포넌트를 변수처럼 다루고

따라서 치지 않고 해보려고 했으나 실패 아직 너무 익숙하지 않다.Toolbar를 사용하는 LandingPage.jsx로그인 클릭 시

이런 오류가 나오게 된다.Map() 함수 안에 있는 Elements는 꼭 key가 필요하다.key가 필요하니 배열안에 id속성을 추가 해주고 1,2,3,4 순서대로 넣어주자 이제 렌더링 해주는 부분을 고쳐줘야 한다.key를 지정할 때 다양한 방법으로 지정 가능 하다.i

Form은 사용자로부터 입력을 받기 위해 사용react와 html에서의 form에는 차이가 있다.react는 component 내부에서 state를 이용해 data를 관리한다.html은 element 내부에 data가 존재한다.입력한 값에 접근하고 제어할 수 있는 Co

이번엔 여러개의 component들 사이의 state공유에 대해 알아보자.state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말한다.보통 가장 가까운 부모 component state를 공유해 사용한다.state 공유 예제react에서 co

여러개의 컴포넌트를 합쳐 새로운 컴포넌트를 만드는 것을 의미한다. 사전적 의미인 구성 보다는 여러개를 합쳐 만드니 합성이라고 이해하는게 좋다.무작정 붙여서 만드는게 아니고 여러개의 컴포넌트를 어떻게 조합할 것인가? 를 생각하자.Containment 방식하위 컴포넌트를

context를 이용하면 data를 하나하나 props로 넘겨주지 않아도 컴포넌트 트리 전체에 data를 제공할 수 있다.context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법참고 Context Doc기존 방식으

변경 전변경 후위에 사용된 useCallback이 잘 기억이 나지 않는다.useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수.첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고

미니 블로그에 필요한 기능, 각 기능에 필요한 Component글 목록 보기 기능 (리스트) \- PostList, PostListItem글 보기 기능 \- Post댓글 보기 기능 \- CommentList, CommentListItem글 작성 기능 \- Pos