본문 바로가기

전체 글

 (109)
리액트 시계 만들기 실습 [처음 만난 리액트 #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..
JSX의 장점 및 사용법 [처음 만난 리액트 #10] 3강. JSX [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트로 개발할 때 JSX를 사용하는 것은 필수는 아니지만, JSX를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장함 JSX의 장점 장점1. 코드의 간결성 JSX 사용함 Hello, {name} HTML의 div 태그를 사용해서 name이라는 변수가 들어간 인사말을 표현 = JSX 사용 안함 React.createElement('div', null, 'Hello, ${name}'); React의 createElement 함수를 사용하여 동일한 작업을 수행 (type, ..
JSX의 정의와 역할 [처음 만난 리액트 #9] 3강. JSX [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com JSX란? ● JavaScript를 줄여서 JS라고 많이 표기함 -> JSX는 JavaScript와 연관이 있음 ● A syntax extension to JavaScript 자바스크립트의 확장 문법 ● JavaScript + XML/HTML JSX 코드 const element = Hello, world!; ● 대입연산자 = : 오른쪽에 있는 값을 왼쪽의 변수에 대입하는 역할 ● = 왼쪽의 자료형 const와 변수명 element는 흔히 사용하는 JavaScript 문법 ● = 오른쪽에..
create-react-app 크리에이트 리액트 앱 [처음 만난 리액트 #8] 2강. 리액트 시작하기 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트 없이 html, css, JavaScript 만으로 웹사이트를 만들 수 있지만, 리액트를 적용했을 떄 다양한 장점이 있기 때문에 리액트를 사용하는 것! 1. 실습으로 html 만을 사용해서 간단한 웹사이트를 만들어보고, css를 사용해서 스타일을 입히기 2. 완성된 웹사이트에 리액트를 적용해보고, 리액트 앱을 생성해주는 크리에이트 리액트 앱에 대해 알아보기 create-react-app (CRA) 리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어있는 상태로 프..
직접 리액트 연동하기 [처음 만난 리액트 #7] 2강. 리액트 시작하기 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트 없이 html, css, JavaScript 만으로 웹사이트를 만들 수 있지만, 리액트를 적용했을 떄 다양한 장점이 있기 때문에 리액트를 사용하는 것! 1. 실습으로 html 만을 사용해서 간단한 웹사이트를 만들어보고, css를 사용해서 스타일을 입히기 2. 완성된 웹사이트에 리액트를 적용해보고, 리액트 앱을 생성해주는 크리에이트 리액트 앱에 대해 알아보기 HTML만으로 간단한 웹사이트 만들기 HTML은 웹사이트의 전체 뼈대를 구성 스타일 없이 뼈대만 있는 간단한 웹사이트..

티스토리툴바