본문 바로가기

전체 글

 (110)
useMemo, useCallback, useRef [처음 만난 리액트 #22] 7강. Hooks [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 대표적인 Hooks 1. useState() & 2. useEffect() Hooks의 개념과 useState, useEffect [처음 만난 리액트 #21] 7강. Hooks [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Hooks - Hooks은 리액 hisoit.tistory.com 3. useMemo() Memorized..
Hooks의 개념과 useState, useEffect [처음 만난 리액트 #21] 7강. Hooks [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Hooks - Hooks은 리액트가 처음 나왔을 때 부터 있던 개념은 아니고, 리액트 버전 16.8에서 새롭게 등장한 개념 - 최근에는 리액트로 개발을 할 때 대부분 Hooks을 사용 컴포넌트에는 두 가지 종류 - 함수 컴포넌트와 클래스 컴포넌트 State를 이용해 렌더링에 필요한 데이터를 관리 ● 클래스 컴포넌트에서는 생성자(constructor)에서 state를 정의하고 setState() 함수를 통해 state를 업데이트 - 클래스 컴포넌트는 state와 관련된 기능뿐만 아니라 ..
State, 생명주기 함수 사용하기 실습 [처음 만난 리액트 #21] 6강. State and Lifecycle [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 클래스 컴포넌트를 만들어 State, 생명주기 함수 사용해보기 State 사용하기 실습 1. VS Code로 create-react-app으로 만든 프로젝트 열기 2. chapter_06이라는 이름으로 폴더 생성 3. 만든 폴더에 Notification.jsx라는 이름의 파일을 새로 만들고, Notification이라는 이름의 리액트 클래스 컴포넌트를 만듦 표시된 constructor 부분을 보면 Notification 컴포넌트가 state에 아무런 데이터도 ..
State와 Lifecycle의 정의 [처음 만난 리액트 #20] 6강. State and Lifecycle [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com State와 Lifecycle은 주로 클래스 컴포넌트와 관련된 내용 ● State라는 개념은 함수 컴포넌트에서도 사용하기 때문에 개념을 확실히 이해하고 넘어가야 함 ● Lifecycle는 클래스 컴포넌트에서만 사용하는 개념 - 최근에는 클래스 컴포넌트를 거의 사용하지 않기 때문에 이런 개념이 있다 정도만 알아두면 됨 State 리액트 Component의 상태 (= 리액트 Component의 데이터) 리액트 Component의 변경 가능한 데이터 ● state는..
리액트 댓글 컴포넌트 만들기 실습 [처음 만난 리액트 #19] 5강. Components and Props [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 댓글 컴포넌트 만들기 실습 1. VS Code에서 이전에 create-react-app으로 만들었던 프로젝트 열기 2. chapter_05라는 이름의 폴더 생성 3. 만든 폴더에 comment.jsx라는 파일을 생성 4. comment라는 이름의 리액트 함수 컴포넌트를 만듦 5. 동일한 폴더에 commentList.jsx라는 이름을 새로 만들고, commentList라는 이름의 리액트 함수 컴포넌트를 만듦 여러 개의 댓글 컴포넌트를 포함하고 있는 댓글 목록 ..
Component 합성과 추출 [처음 만난 리액트 #18] 5강. Components and Props [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Component 합성 : 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것 리액트에서는 Component 안에 또 다른 Component를 쓸 수 있음 -> 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능! function Welcome(props) { return Hello, {props.name}; } function App(props) { return ( ) } ReactDOM.render( , document.getElement..
Component 만들기 [처음 만난 리액트 #17] 5강. Components and Props [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com React Component의 종류 리액트에서의 컴포넌트는 크게 Function Component와 Class Component로 나뉨 ● 리액트의 초기 버전에서는 Class Component를 주로 사용 ● Class Component가 사용하기 불편하다는 의견이 많이 나왔고, 이후에는 Function Component(함수 컴포넌트)를 개선해서 주로 사용하게 됨 ● 함수 컴포넌트를 개선하는 과정에서 개발된 것이 hook Function Component ..
Props의 특징 및 사용법 [처음 만난 리액트 #16] 5강. Components and Props [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Props의 특징 Read-Only 읽기 전용 = 값을 변경할 수 없다 ● props의 값은 리액트 컴포넌트가 element를 생성하기 위해서 사용하는 값 ● 이 값들이 element를 생성하는 도중에 갑자기 바뀌어버리면 제대로 된 element를 생성할 수 없음 ● 마치 붕어빵이 다 구워졌는데, 속재료를 바꿀 수 없는 것과 마찬가지 그럼 다른 props의 값으로 element를 생성하려면? 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성 이 과정..

티스토리툴바