1. 컴포넌트개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리라고 소개한다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯 하나로 합쳐 페이지를 구성하기 때문이다. 리액트의 핵심 개념 중 하나인 컴포넌트를 자세히 알아보겠다.  1-(1) 실습 환경 설정하기앞서 리액트 앱을 생성했던 방법과 동일하다.npx create-react-app . Documents 폴더 아래 chapter5 폴더를 만든 다음, 해당 폴더 안에서 터미널을 열어 위 명령어로 새로운 리액트 앱을 만든다. 그 후 사용하지 않을 파일과 코드를 삭제하면 실습 환경 설정이 완료된다.1-(2) 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다. 클래스로 컴포넌트..

24-25/React.js 1 2024. 11. 8. 13:36

1.  컴포넌트   [실습 환경 설정] 실습 환경 설정을 위해 새 폴더 chapter5를 만들고 터미널에서 npx create-react-app . 명령어로 새로운 리액트 앱을 만든다. 그리고 src 폴더에서 실습에 사용하지 않을 아래의 파일들을 제거한다. - src/App.test.js- src/logo.svg- src/reportWebVitals.js- src/setupTest.js Create React App이 자동으로 생성하지만 실습에는 사용하지 않는 코드를 모두 삭제한다.각각 index.js와 App.js의 파일이 아래와 같은 코드들만 남도록 불필요한 코드를 모두 삭제한다.import React from 'react';import ReactDOM from 'react-dom/client';im..

24-25/React.js 2 2024. 11. 8. 10:00

1. 컴포넌트 리액트 앱 만들기 문서(Documents) 폴더 아래에 chapter5 폴더를 만든 다음 비주얼 스튜디오 코드에서 생성한 폴더를 연다. 단축키 +를 눌러 터미널을 열고, 다음 명령어로 새로운 리액트 앱을 만든다. npx create-react-app . 사용하지 않는 파일 삭제하기: 혼동을 피하고자 src 폴더에서 실습에 사용하지 않을 파일 일부를 제거한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js 이 파일들은 Create React App이 자동으로 생성한 파일들로 테스트 코드를 작성하거나 리액트 앱의 성능을 살필 때 사용한다. 진행할 실습에서는 사용하지 않으므로 삭제한다. 사용하지 않을 코드 삭제하기: C..

23-24/React.js 2 2023. 11. 3. 17:35

컴포넌트 리액트는 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯이 하나로 합쳐 페이지를 구성합니다. 리액트의 핵심 개념인 컴포넌트에 대해 자세히 알아보겠습니다. 실습 환경 설정하기 앞에서 Create React App으로 리액트 앱을 생성했던 방법과 동일합니다. npx create-react-app . Documents 폴더 아래에 chapter5 폴더를 만든 다음, 해당 폴더 안에서 단축키 +를 눌러 터미널을 열고, 다음 명령어로 새로운 리액트 앱을 만듭니다. npm run start 터미널에서 npm run start 명령으로 리액트 앱을 시작합니다. 첫 컴포넌트 만들기 리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만듭니다. 클래스로 컴포..

23-24/React.js 1 2023. 11. 3. 10:00

컴포넌트 실습 환경 설정하기 본격적인 실습에 앞서 5장에서 사용할 새 리액트 앱을 만든다. 리액트 앱 만든다. npx create-react-app . 사용하지 않는 파일 삭제한다. → Create React App이 자동으로 생성한 파일들로 테스트 코드를 작성하거나 리액트 앱의 성능을 살필 때 사용한다. 진행할 실습에서는 사용하지 않으므로 삭제한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js 사용하지 않을 코드를 삭제한다. index.js → 주석으로 표시된 코드는 모두 삭제한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './in..

23-24/React.js 3 2023. 11. 3. 10:00

지금까지 배운 것들을 바탕으로 일정 관리 웹 애플리케이션을 만들어 보도록 하겠습니다. 10.1 프로젝트 준비하기 일정 관리 웹 애플리케이션을 만들기 위한 준비작업을 해보겠습니다. 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app $ cd todo-app $ yarn add sass classnames reacct-icons 애플리케이션을 위한 프로젝트를 새로 생성해줍니다. 이번 프로젝트에서는 sass를 이용할 예정이며, classnames를 통해 좀 더 편한 스타일링을 할 예정입니다. 또한, react-icons를 통해서 다양한 아이콘도 사용해 볼 예정입니다. 10.1.2 Prettier 설정 { "singleQuote": true, "sem..

22-23/22-23 리액트 스타터 3 2022. 12. 22. 10:00

3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수 컴포넌트와 클래스형 컴포넌트가 있습니다. 2장에서 보았던 코드는 함수 컴포넌트로, 다음과 같은 구조로 이루어져 있습니다. import './App.css'; function App() { const name = 'react'; return {name}; } export default App; 함수 컴포넌트는 클래스형 컴포넌트보다 선언하기 훨씬 편하다는 장점이 있습니다. 다음은 클래스형 컴포넌트의 구조를 보겠습니다. import React, { Component } from 'react'; class App extends Component{ render() { const name = 'react'; return {name}; } } ex..

22-23/22-23 리액트 스타터 3 2022. 10. 6. 10:00

이번 장에서는 컴포넌트에 대해 배워보겠습니다. 1장에서 컴포넌트는 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체라고 배웠습니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다. import React from ‘react‘; import ‘./App.css‘; function App() { const name = ‘리액트‘; return {name}; } export default App; 2장에서 보았던 App.js는 함수형 컴포넌트입니다. import React, { Component } ..

22-23/22-23 리액트 스타터 1 2022. 10. 6. 10:00

이번 10장에서는 일정 관리 애플리케이션을 만들어 보았습니다. 간단하게 컴포넌트 설명 후 코드 첨부하겠습니다. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다. TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 줍니다. TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

INDEX 3장 컴포넌트 1. 클래스형 컴포넌트 ● 컴포넌트를 선언하는 두 가지 방식 2. 첫 컴포넌트 생성 2.1 src 디렉터리에 MyComponent.js 파일 생성 2.2 코드 작성하기 2.3 모듈 내보내기 및 불러오기 3. props 3.1 JSX 내부에서 props 렌더링 3.2 컴포넌트 사용 시 props 값 지정하기 3.3 props 기본값 설정: defaultProps 3.4 태그 사이의 내용을 보여주는 children 3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기 3.6 propTypes를 통한 props 검증 * isRequired를 사용하여 필수 propTypes 설정 4. state 4.1 클래스형 컴포넌트의 state 4.2 함수 컴포넌트에서 useState 사용..

21-22/21-22 리액트 스타터 -2 2021. 11. 8. 18:49

1. 함수형 컴포넌트 vs 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component{ render() { const name = "react"; return {name} } } export default App; 클래스형 컴포넌트의 특징은 ① state 기능 ② 라이프사이클 기능 ③ 임의 메서드 정의 클래스형 컴포넌트에는 render함수가 반드시 있어야 하고, JSX를 반환해주어야 합니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const n..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00