전체 글11 CSS: 박스(box) 모델 다음과 같은 HTML, CSS가 있다고 가정하겠습니다. 여러분, 여기에 글자가 들어가게 됩니다. 원하는대로 들어갔을까요? p{ width:100px; height:50px; padding:20px; border:1px solid; } See the Pen Untitled by Chickenbumps (@chickenbumps) on CodePen. 콘텐츠는 박스를 벗어나게 되고 width는 100px가 아닌 142p가 됩니다. 왜 그런걸까요?(아직 비밀) 앞으로 CSS의 작동방식, CSS의 다른 측면에 의해 CSS가 영향을 받는 방식 그리고 이를 제어하는 방식을 이해하면 예측 가능한 CSS를 작성하는데 도움이 될겁니다. 콘텐츠 및 크기 박스는 diplay 값, 설정된 치수 및 박스 안에 있는 콘텐츠에 따.. 2022. 6. 16. [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. 이전 1 2 3 다음
