이번 시간부터는 지난 시간까지 배웠던 React의 문법을 사용하여 간단한 가계부를 만들어 보도록 하겠습니다. 여러 게시글을 통해 점차 살을 붙여갈 것입니다. 프로젝트 설치 및 시작 우선 새로운 프로젝트를 하나 설치하고 그 곳에서 작업하도록 하겠습니다. VS Code를 실행하고 개발 서버를 시작해주세요 12345create-react-app account-book-example cd account-book-example yarn startcs 시작하겠습니다. 우선 프로젝트의 src 안에 components 디렉터리를 생성해주세요. 이제부터 생성할 컴포넌트는 이 곳에 넣도록 하겠습니다. 컴포넌트 추가 - AccountBookForm src/components/AccountBookForm.js 파일을 생성해 ..
React에는 컴포넌트가 로드될 때, 업데이트 될 때, 제거될 때 자동으로 호출되는 API가 존재합니다. 이를 React의 Life Cycle API라고 합니다. 초기 생성 API 브라우저에 컴포넌트가 나타나기 전에 호출되는 API에 대해 알아보겠습니다. - constructor(props) : 컴포넌트 생성자 함수로 컴포넌트가 새로 만들어 질 때마다 호출됩니다. - componentWillMount() : 컴포넌트가 화면에 나타나기 직전에 호출되는 API입니다. 주로 서버를 호출하는 용도로 사용되었는데 이 API를 더 필요하지 않다고 판단하여 React v16.3에서 더 이상 사용하지 않게 되었습니다. v16.3 이후 UNSAFE_componentWillMount()로 사용됩니다. 기존에 여기서 처리하..
React Component에서 다루는 데이터는 props와 state가 있습니다. props props는 자식 Component가 생성될 때 부모 Component에서 받아온 데이터로 변경이 불가능합니다. 자식 Component에서 this라는 키워드를 통해 부모 Component로부터 받은 props를 사용할 수 있습니다. src 폴더에 Card.js라는 파일을 만들고 다음과 같은 내용을 입력합니다. 12345678910111213141516171819202122232425// Card.jsimport React, { Component } from "react"; class Card extends Component { render() { return ( 이름 : {this.props.name} 소속 ..
- Total
- Today
- Yesterday
- mapToObj
- #배열 #array #map 함수
- 회고
- flaMap
- modern java
- Java8
- 개발자
- 중간 연산
- flatMapToInt
- 변경사항
- 자바
- flatMapToLong
- 충북 콕! 콕!
- 목표
- IntelliJ
- 토이 프로젝트
- 계획
- #React #ReactJS #리액트
- 다짐
- Stream API
- jdk14
- java
- flatMapToDouble
- lambda
- #예제 #example #가계부 #Account Book
- 스트림
- 익명 클래스
- java14
- import문
- 람다
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |