React4 [React를 다루는 기술 정리] 5장 ref: DOM에 이름 달기 5장 ref: DOM에 이름 달기 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용합니다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref 개념입니다. 5.1 ref는 어떤 상황에서 사용해야 할까? ✅ DOM을 꼭 직절적으로 건드려야 할 때 5.1.3 DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 5.2.3.1 input에 ref 달기 handleButton = () => { this.setState({ clicked: true, validated: this.state.password === "0000", }); this.supe.. 2022. 2. 15. [React를 다루는 기술 정리] 4장 이벤트 핸들링 4장 이벤트 핸들링 4.1 리액트의 이벤트 시스템 4.1.1 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. DOM 요소에만 이벤트를 설정할 수 있습니다. 4.2.3 임의 메서드 만들기 4.2.3.1 기본 방식 import React, { Component } from "react"; class EventPractice extends Component { state = { name: "", }; constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handle.. 2022. 2. 15. [React를 다루는 기술 정리] 3장 컴포넌트 3장 컴포넌트 3.1 클래스형 컴포넌트 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다. 함수형 컴포넌트와 차이점 : 클래스 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것 + 임의 메서드 정의 가능 ⇒ 리액트v16.8 이후 Hooks 도입 이후 함수형 컴포넌트의 이러한 문제 해결함. 3.2.2 코드 작성하기 ✅ ES6의 화살표 함수와 함수형 컴포넌트의 차이점 ⇒ 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다. 3.3.3 props 기본값 설정: defaultProps import React from 'react'; const MyComponent = props => { return .. 2022. 2. 15. [React를 다루는 기술 정리] 2장 JSX React를 다루는 기술 정리 2장 JSX 2.4.1 감싸인 요소 리액트 컴포넌트에서 요소 여러개를 왜 하나의 요소로 꼭 감싸 주어야 할까요? 그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다. 2.4.2 자바스크립트 표현 JSX 는 DOM 요소를 렌더링 하는기능과 자바스크립트 표현식을 쓸 수 있다. var은 scope가 함수 단위 이고 let, const는 scope가 블록 단위 이다. ES6 이후로는 let, const만 사용하자. 2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링 && 연산자로 조건부 렌더링을 할 수 있는 이유 리액트에서 false를 렌더링할 때는 null.. 2022. 2. 8. 이전 1 다음