차근차근 배움터

한 컴포넌트 안에는 하나의 요소만 존재해야 한다 function ExpenseItem() { return June 1st 2023 ExpenseItem Amount } export default ExpenseItem;

App.js는 root component이다 리액트 파일 명명규칙으로는 대문자로 시작하고 중간의 다른 단어도 대문자로 작성하는 파스칼 케이스 PascalCase 리액트에 있는 컴포넌트는 단지 자바스크립트의 함수일 뿐이다 간단하게 App.js에 처음으로 만든 컴포넌트를 삽입해보았다

아래와 같은 js 코드 입력 방식은 명령적인 접근 방식이었다. 하지만 리액트의 JSX와 컴포넌트 방식으로 훨씬 쉽게 작성하게 되었다

JSX란 자바스크립트 안에 있는 HTML 코드이다 사실 JSX는 자바스크립트의 xml 코드를 의미한다. "xml이란 ? " 다시 말하지만 npm start와 같은 프로세스를 통 변환 과정이 존재하고 이러한 코드가 실행 및 작동 가능하다 개발자 도구를 열어보면 복잡한 파일들이 존재하는 것을 볼 수 있다 파일들의 코드를 보면 단지 우리의 소스 코드 뿐만 아니라 전체 리액트와 리액트 돔 라이브러리 소스 코드를 포함한다. 그래서 우리의 소스코드 뿐만 아니라 전체 리액트 패키지 코드가 있다는 것을 확인할 수 있다 꼭 기억하기를 바란다. 즉 브라우저 개발자 도구에서 코드를 통해 확인할 수 있듯이 코드가 변환되는 과정이 들어간다

가장 처음 프로젝트를 실행하면 나타나는 것이 index.js 파일의 코드들이다 index.js에 프로젝트에서 가장 먼저 실행되는 파일이다 npm start 프로세스 개발자 서버를 가동하고 코드를 살펴보는데 코드를 살펴보고 실행하며 브라우저에 전달하는 것 뿐만 아니라 전달하기 전에 코드를 변형하여 추가 기능이 브라우저에서 작동하도록 해주는 것이다 그 코드만으로는 작동하지 않을 것이기 때문이다. 예를 들면 아래의 css import 구문은 일반 Javscript 파일에서는 동작하지 않는다 잘못된 구문이지만 이 프로젝트에서는 이렇게 사용할 수 있다. 또 하나는 컴포넌트의 구문 같은 것이다 이렇게 react와 reactdom이라는 라이브러리를 가져와야 아래오 ㅏ같은 import 구문도 사용할 수 있게 되는 것이..

이전 강의를 건너 뛰셨다면 첨부 파일에 시작 프로젝트 스냅샷이 있습니다. 1. 다운로드 한 뒤 2. 압축을 해제하시고 3. npm install i 을 압축을 푼 폴더에서 실행하세요 4. npm start 를 실행해 개발 서버를 시작합니다. 이 강의를 위한 리소스 입니다. https://github.com/academind/react-complete-guide-code/tree/03-react-basics-working-with-components/code GitHub - academind/react-complete-guide-code: Code snapshots and materials for our "React - The Complete Guide" course (https:// Code snapsh..

create-react-app 리액트 프로젝트를 시작하기 가장 쉬운 방법이다 create-react-app.dev 홈페이지에서 더 자세한 사항을 확인할 수도 있다. 리액트 앱을 사용하는 것이 개발 과정들을 간단하게 해준다 Node.js 설치 리액트와 직접적으로 관련되어 있는 것은 아니지만 브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임입니다. 리액트 코드는 브라우저에서 실행되는 JS 코드입니다. 하지만 Create react app 툴을 위해 이 node.js가 필요하다. $ npx create-react-app my-app 이 명령을 실행하기 위해서는 컴퓨터에 node.js가 설치되어 있어야 한다. 그리고 create react ap의 생성된 프로젝트의 뒷단에는 produ..

27. 새 React 프로젝트와 NodeJS에 대한 참고 사항 다음 강의에서 NodeJS(새 React 프로젝트를 생성하는데 필요한 도구)를 설치합니다. NodeJS를 다운로드하고 설치하는 방법과 더불어 React 프로젝트를 생성하는 방법을 배울 예정입니다. 새로 생성한 React 프로젝트를 실행하는 도중에 ‘digital envelope routines unsupported’ 오류가 발생한다면, 그 이유는 NodeJS 버전 때문입니다. 이 오류가 발생한다면, package.json 파일에서 다음을 교체하십시오. "start": "react-scripts start" 부분을 아래와 같이 바꿔주세요. "start": "react-scripts --openssl-legacy-provider start" 그리..

Declarative Approach 기본적으로 여러분은 바닐라 자바스크립트로 했던 것처럼 어떤 HTML 요소를 생성하고 사용자 인터페이스에서 어떤 위치에 삽입되어야 하는지 리액트에게 명령하지 않을 것이다. 리액트에서 최종 목표 상태를 다른 상황에 따라서 업데이트 되어야 하는 지 해결하는 것이다. 직접 구체적인 DOM을 업데이트하는 지침을 작성할 필요가 없다. 최종상황에서 어떻게 되어야 하는지 작성한다. 대신, 리액트나 리액트 컴포넌트로 작업할 때는 최종 상태와 어떤 상황에서 어떤 상태가 사용되어야 하는지 정의하면 됩니다 그리고 리액트는 이 모든 작업을 숨어서 처리합니다

리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리이다 컴포넌트는 재사용 가능하지만 재사용할 필요는 없다 하나의 특징인 셈이다. 프로그래밍의 기본 개념인 함수의 특성을 리액트가 그대로 가지고 있다고 생각할 수 있다.