반응형

온라인 강의/React 완벽 가이드 [Udemy] 187

38. "props"를 통해 데이터 전달하기

자바스크립트 함수에서 매개변수를 사용해 다른 값을 받아서 출력하는 것처럼 리액트에서도 매개변수를 사용하거나 props를 사용하여 같은 로직으로 아이템을 만들 수 있다 속성 대신에 props란 이름으로 불린다 데이터가 있는 파일에서 속성 props로 값을 전달한다 위와 같이 이름을 지정 (title, amount, date) 로 지정을 해서 ExpenseItem.js 에 보내면 ExpenseItem.js 에서 어떻게 받느냐? //아래와 같이 function ExpenseItem(props) //이렇게 받을 수 있다 그리고 꺼내 쓸 때 props.속성이름 과 같은 형식으로 가능 또 props 대신 중괄호 안에 속성 이름들을 작성해서 바로 가져올 수도 있다 function ExpenseItems({title,..

37. JSX에서 동적 데이터 출력 및 표현식 작업하기

ExpenseItem.js 파일 내에서 하드코딩 되어 있는 값부분들을 유동적으로 바꾸어 재사용 가능하게 하려면 어떻게 해야 할까? 그렇다면 자바스크립트는 언제 사용하는가? 자바스크립트에서 선언한 변수들을 {} 를 이용해서 사용할 수 있다 변수를 선언해서 그 값을 바탕으로 데이터를 입력하는 방법을 배웠다 import './ExpenseItem.css'; function ExpenseItem() { // data 객체 생성 const expenseDate = new Date(2023, 7, 1); const expenseTitle = 'Car Insurance'; const expenseAmount = 294.56; return ( {expenseDate.toString()} {expenseTitle} {e..

36. 기본 CSS 스타일 추가

JSX에서는 class가 아닌 className으로 사용한다 이상해 보일 수 있지만 css import 는 아래와 같은 방식으로 한다 import './ExpenseItem.css'; ExpenseItem.js import './ExpenseItem.css'; function ExpenseItem() { return ( June 1st 2023 ExpenseItem Amount ); } export default ExpenseItem; css는 선생님이 주신 거 복사 css 이름 - 와 __의 차이에 대해서 알면 좋을 것 같다 ExpenseItem.css .expense-item { display: flex; justify-content: space-between; align-items: center; ..

32. JSX 소개

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

31. 표준 리액트 프로젝트 분석하기

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

30. 시작 프로젝트

이전 강의를 건너 뛰셨다면 첨부 파일에 시작 프로젝트 스냅샷이 있습니다. 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..

29. 새로운 리액트 프로젝트 생성하기

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..

반응형