본문 바로가기

개발공부

 (105)
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를 생성 이 과정..
Components와 Props 정의 [처음 만난 리액트 #15] 5강. Components and Props [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Components Componenet-Based : 리액트는 컴포넌트 기반의 구조 ● 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 ● 이러한 컴포넌트들을 레고 블록 조립하듯 컴포넌트들을 모아서 개발 ▲ 에어비엔비 웹사이트 화면을 캡쳐한 뒤 컴포넌트들을 표시 ● A로 표시된 부분과 B로 표시된 부분이 리액트 컴포넌트 ● 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이..
리액트 시계 만들기 실습 [처음 만난 리액트 #14] 4강. Rendering Elements [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com elements의 개념과 역할, elements가 rendering되는 과정에 대해 알아보기 💻 1. VS Code로 앞에서 create react app으로 만든 프로젝트 열기 2. chapter_04라는 이름으로 폴더 생성 3. 만든 폴더에 Clock.jsk라는 이름의 파일을 새로 만들기 4. Clock이라는 이름의 리액트 함수 컴포넌트 작성 Clock 컴포넌트는 현재 시간을 출력하는 간단한 컴포넌트 5. 만든 컴포넌트를 실제 화면에 렌더링하기 위하여 ind..
Elements의 특징 및 렌더링하기 [처음 만난 리액트 #13] 4강. Rendering Elements [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com elements의 개념과 역할, elements가 rendering되는 과정에 대해 알아보기 💻 React Elements의 특징 React elements are immutable (불변성) im (부정) + mutable (변할 수 있는) = immutable (불변의) 한 번 생성된 elements는 변하지 않음 Elements 생성 후에는 children이나 attributes를 바꿀 수 없다! 리액트의 elements는 우리 눈에 보이는 것을 기술한다고..
elements의 정의와 생김새 [처음 만난 리액트 #12] 4강. Rendering Elements [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com elements의 개념과 역할, elements가 rendering되는 과정에 대해 알아보기 💻 Elements란? elements : 어떤 물체를 구성하는 성분 Elements are the smallest building blocks of React apps ㄴ 리액트 앱을 구성하는 가장 작은 블록들 Element는 웹사이트에 대한 모든 정보를 담고있는 객체인 DOM에서 사용하는 용어 기존에는 element하면 DOM element를 의미 ● 앞에서 만든 리..
JSX 코드 작성해보기 [처음 만난 리액트 #11] 3강. JSX [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 1. 앞에서 VS Code로 create-react-app을 사용해서 만든 프로젝트 열기 2. chapter_03이라는 폴더를 생성 3. 만든 폴더에 Book.jsk라는 이름의 파일을 새로 만들고, Book이라는 이름의 리액트 함수 컴포넌트를 만듦 Book 컴포넌트는 props로 name과 numOfPage를 받아서 이를 출력하는 컴포넌트 -> jsx를 사용해서 가독성 높고 직관적인 코드 4. Book 컴포넌트를 사용하는 상위 컴포넌트 Library.jsx 만들기 같은 폴더에 Librar..

티스토리툴바