본문 바로가기

개발공부

 (105)
Hooks 사용해보기 실습 (useState, useEffect Hook 사용, Custom hook 만들기) [처음 만난 리액트 #23] 7강. Hooks [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com useState, useEffect Hook을 사용해보고, Custom hook 만들어보기 실습 💻 useCounter() Custom Hook 만들기 1. VS Code로 create-react-app을 이용해 만든 프로젝트 my-app 열기 2. chapter_07이라는 이름의 폴더 생성 3. 만든 폴더에 useCounter.jsx라는 이름의 파일을 만들고 useCounter라는 이름의 리액트 훅을 만듦 useCounter 훅은 초기 counter 값을 파라미터로 받아서 count..
[Java] 자바 JDK 삭제/설치 방법 (Java 버전 11) Java 수업을 배울 때 Java 버전 8을 설치하여 사용했었는데, 새롭게 듣게 된 스프링 강의에서 버전 11을 사용해 강의를 수강하는 것을 권장해 삭제하고 재설치하게 되었습니다 JDK란? Java Development Kit 자바 개발키트 ● 개발자들이 자바로 개발하기 위해 필요한 키트 ● JDK 안에는 개발 시 필요한 라이브러리들과 javac, javadoc 등의 개발 도구들을 포함 Java 삭제 설정 > 프로그램 추가/제거에서 제거를 눌러 버전 8을 삭제하면 됩니다. Java JDK 설치 https://www.oracle.com/java/technologies/downloads/ Download the Latest Java LTS Free Subscribe to Java SE and get the ..
Hooks의 규칙과 Custom Hook 만들기 [처음 만난 리액트 #23] 7강. Hooks [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Hook의 규칙 1. Hook은 무조건 최상위 레벨에서만 호출해야 한다. 최상위 레벨 : 리액트 컴포넌트의 최상위 레벨을 의미 반복문이나 조건문, 중첩된 함수들 안에서 Hook을 호출하면 안됨 Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다. -> 리액트가 다수의 useState 훅과 useEffect 훅에 호출해서 컴포넌트의 State를 올바르게 관리할 수 있게 됨 잘못된 Hook 사용법 예제코드 function MyComponent(props) { const..
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라는 이름의 리액트 함수 컴포넌트를 만듦 여러 개의 댓글 컴포넌트를 포함하고 있는 댓글 목록 ..

티스토리툴바