Programming Language/React

6장 컴포넌트 반복1. 자바스크립트 배열의 map() 함수자바스크립트 배열 객체의 내장 함수인 map 함수 사용 -> 반복되는 컴포넌트 렌더링 가능map 함수) 파라미터로 전달된 함수를 사용 -> 배열 내 각 요소를 원하는 규칙에 따라 변환 -> 그 결과로 새로운 배열 생성1) 문법arr.map(callback, [thisArg])callback: 새로운 배열의 요소를 생성하는 함수currentValue: 현재 처리하고 있는 요소index: 현재 처리하고 있는 요소의 index 값array: 현재 처리하고 있는 원본 배열thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스2) 예제  2. 데이터 배열을 컴포넌트 배열로 변환하기기존 배열로 컴포넌트로 구성된 배열 생성 가능1)..

5장 ref: DOM에 이름 달기1. ref 사용하는 상황특정 DOM에 작업 해야함 -> ref 사용 =>  Q: '어떤' 작업??/ A: DOM을 꼭 직접적으로 건드려야 할 때 1) 예제 컴포넌트 생성// ValidationSample.css.success { background-color: lightgreen;}.failure { background-color: lightcoral;}// ValidationSample.jsimport React, { Component } from 'react';import './ValidationSample.css';class ValidationSmaple extends Component { state = { password: '', clicked..

4장 이벤트 핸들링이벤트(Event)사용자가 웹 브라우저에서 DOM 요소들과 상호 작용을 하는 것ex. 버튼_마우스 커서 -> onmouseover 이벤트 실행/ 클릭 -> onclick 이벤트 실행/ Form 요소_값 변경 -> onhange 이벤트 실행1. 리액트의 이벤트  시스템이벤트 사용 주의사항이벤트 이름 -> 카멜 표기법ex. onclick -> onClick/ onkeyup -> onKeyUp이벤트에 실행할 자바스크립트 코드 전달X, 함수 형태의 값 전달HTML) 큰따옴표 안에 실행할 코드 넣음리액트) 함수 형태의 객체를 전달바로 만들어서 전달렌더링 부분 외부에 미리 만들어서 전달DOM 요소에만 이벤트 설정Odiv, button, input, form, span 등 DOM의 요소에 이벤트 설..

3장 컴포넌트컴포넌트 기능은 단순한 템플릿 이상데이터 O -> 이에 맞춰 UI 만듦라이프사이클 API 이용 -> 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업 처임의 메서드 만들어 특별한 기능 붙이기1. 컴포넌트클래스형 컴포넌트state 기능 및 라이프사이클 기능 사용 O임의 메서드 정의render 함수 필요 + JSX 반환// App.jsimport React, { Component } from 'react';class App extends Component { render() const name="react"; return {name} }}export default App;함수 컴포넌트(+) 선언하기 편함메모리 자원 사용 ↓플젝 완성하여 빌드 후 배포 ->..

1장 리액트 시작1. 왜 리액트인가?모델(Model): 애플리케이션에서 사용하는 데이터를 관리하는 부분뷰(View): 사용자에게 보이는 부분MVC(Model-View-Controller), MVVM(Model-View-View Model), MVM(Model-View-Whatever) 아키텍처 등의 공통점 사용자) 작업(ex. 버튼 클릭, 텍스트 입력)-> 프로그램-컨트롤러) 모델 데이터 조회, 수정/ 변경된 사항 -> 뷰에 반영 = 뷰를 변형(mutate) => 페이스북: 데이터가 변할 때마다 어떤 변화 줄지 X 기존 뷰 날리고 처음부터 새로 렌더링 O-> 애플리케이션 구조 간단하고, 작성해야 할 코드 양 ↓: 뷰가 어떻게 생길지 선언, 데이터 변화 -> 기존의 것 버리고 정해진 규칙에 따라 새로 렌더..