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

이번 장에서는 컴포넌트에 대해 배워보겠습니다. 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

2.1 코드 이해하기 create-react-app으로 hello-react 프로젝트를 만들고 src/App.js 파일을 VS code에서 엽니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; import 구문은 특정 파일을 불러오는 것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용할 수 있습니다. 모듈을 불러와서 사용하는 것은 브라우저에는 없는 기능입니다. 이는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해..

22-23/22-23 리액트 스타터 1 2022. 9. 29. 10:01

2.1코드 이해하기 2.1.0 import React from 'react'; import 구문은 특정 파일을 불러오는 구문입니다. import를 통해 다른 파일을 불러오고 모듈도 불러와서 사용할 수 있습니다. import React from 'react'; 위의 코드는 React라는 모듈을 react라는 패키지에서 불러온다는 뜻입니다. 2.1.1 번들러와 로더 원래 브라우저에서는 import를 통해 모듈을 불러올 수 없습니다. 이런 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용합니다. 번들러는 묶는다는 뜻으로 import를 통해 불러온 모듈을 모두 합쳐 하나의 파일로 만들어 줍니다. 또한 최적화를 통해 여러 개의 파일로의 분리도 가능합니다. 리액트에서는 주로 웹팩이라는 번들러를 사용합니다. im..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:01

이번 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

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:01

2.1 코드 이해하기 import React from 'react'; 위 코드는 리액트를 불러와서 (import) 사용할 수 있게 해 주는 코드입니다. 리액트 프로젝트 제작 시 node_moudles 디렉터리 생성됨 → 이 디렉터리 안에 있는 react 모듈을 설치합니다. 모듈을 불러와서 사용하기는 브라우저에는 없던 기능입니다. → 브라우저에서도 사용하기 위해 **번들러(bunlder)**를 사용합니다. (Node.js에서 지원합니다.) 번들러 (bundler) 종류: 웹팩, Parcel, browserify 등 이 중, 리액트에서는 웹팩을 사용합니다. import(or require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다. 최적화 과정에서 여러 개의 파일로 분리..

21-22/21-22 리액트 스타터 -1 2021. 11. 1. 12:01