react (46) 썸네일형 리스트형 [리액트를 다루는 기술] 8장 Hooks 1. useState - 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌 - useState 함수의 파라미터에는 상태의 기본값을 넣어 줌 - useState는 배열을 반환하는데 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수 counter.js import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value+1)}>+1 setValue(value-1)}>-1 ) } export default Counter; 1) useState를 여러 번 사용하기 - 컴포넌트에서 관리해야 할 상태가 여.. [리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드 1. 라이프사이클 메서드의 이해 - 클래스형 컴포넌트에만 사용 가능 - Will 접두사 : 어떤 작업을 작동하기 전에 실행되는 메서드 - Did 접두사 : 어떤 작업을 작동한 후에 실행되는 메서드 - 라이프사이클은 마운트,업데이트,언마운트 카테고리로 나눔 1) 마운트 (mount) - DOM이 생성되고 웹브라우저상에 나타나는 것 - Constructor - 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 - getDerivedStateFromProps - props에 있는 값을 state에 넣을 때 사용하는 메서드 - reder - 우리가 준비한 UI를 렌더랑하는 메서드 - componentDid - 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 2) 업데이트 (update) - 업데이.. [리액트를 다루는 기술] 6장 컴포넌트 반복 1. 자바스크립트 배열의 map() 함수 - map() 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있음 - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성 1) 문법 arr.map(callback, [thisArg]) - 파라미터 callback : 새로운 배열의 요소를 생성하는 함수 - currentValue: 현재 처리하고 있는 요소 - index: 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 ex) - 기존 배열에 있는 값들을 제곱하여 새로운 배열 생성 const numbers = [1,.. [리액트를 다루는 기술] 5장 ref: DOM에 이름 달기 1. ref는 어떤 상황에서 사용해야 할까? - 특정 DOM에 작업을 해야할 때 ref를 사용 - DOM을 꼭 사용해야 하는 상황 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas 요소에 그림 그리기 ValidationSample.js import { Component } from 'react'; import './ValidationSample.css'; class ValidationSample extends Component { state = { password: '', clicked: false, validated: false } handleChange = (e) => { this.setState({ password:e.target.value }); } handleButton.. [리액트를 다루는 기술] 4장 이벤트 핸들링 1. 리액트의 이벤트 시스템 - 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 함 - 이벤트를 사용할 떄 주의사항 1) 이벤트 이름은 카멜 표기법으로 작성 2) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 3) DOM 요소에만 이벤트를 설정할 수 있음 2. 예제로 이벤트 핸들링 익히기 1) onChange 이벤트 핸들링 하기 onChange 이벤트 설정 EventPractice.js import { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e.target.value); } } /> .. [리액트를 다루는 기술] 3장 컴포넌트 1. 클래스형 컴포넌트 - 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있음 - 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 함 import { Component } from 'react'; class App extends Component { render() { const name='react'; return {name}; } } export default App; 2. 첫 컴포넌트 생성 - 파일 만들기 -> 코드 작성하기 -> 모듈 내보내기 및 불러오기 MyComopnent.js const MyComponent = () => { return 나의 새롭고 멋진 컴포넌트; }; e.. [소플] ch 15. 스타일링 1. styled-components - CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리 1) styled-components 설치 npm install --save styled-components 2) styled-components 기본 사용법 - styled-components는 태그드 템플릿 리터럴(tagged template literal)을 사용하여 구성 요소의 스타일을 지정 리터럴(literal) - 소스코드 상에 있는 고정된 값 템플릿 리터럴 - backticks(`)를 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법 - 언태그드 템플릿 리터럴(Untagged template literal)과 태그드 템플릿 .. [소플] ch 14. 컨텍스트 1. 컨텍스트란 무엇인가? props를 이용한 방식 - 데이터가 컴포넌트의 props를 통해 부모에서 자식으로 단방향 전달 - 여러 컴포넌트에 걸쳐서 자주 사용되는 데이터를 전달하려 하면 반복적인 코드가 많이 생기고 지저분해짐 컨텍스트를 이용한 방법 - 컴포넌트 트리 (component tree)를 통해 곧바로 컴포넌트에 전달 - 컨텍스트를 사용하면 일일이 props로 전달할 필요 없이 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있음 - 해당 데이터와 데이터의 변경사항을 모두 하위 컴포넌트들에게 broadcast 해줌 - 컨텍스트를 사용하기에 적합한 데이터의 대표적인 예로 현재 지역정보, UI 테마, 캐싱된 데이터 등이 있음 2. 언제 컨텍스트를 사용해야 할까? - 여러 컴포넌트에서 자주.. 이전 1 2 3 4 5 6 다음
