본문 바로가기

분류 전체보기

 (894)
[리액트를 다루는 기술] 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. 언제 컨텍스트를 사용해야 할까? - 여러 컴포넌트에서 자주..
[소플] ch 13. 합성 vs 상속 1. 합성에 대해 알아보기 합성(Composition) - 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 - 조합 방법에 따라 합성의 사용기법이 나눠짐 1) Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 - 사이드바(Sidebar)나 다이얼로그 (Dialog)같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없음 -> 해당 컴포넌트를 사용하는 개바라가 어떤 것을 넣는냐에 따라 하위 컴포넌트가 달라지기 때문 -> Containment 방법을 사용하여 합성을 사용 - Containment를 사용하는 방법은 리액트 컴포넌트의 props에 기본적으로 들어 있는 children 속성 사용 - props.children를 통해 하위 컴포넌트를 하나로 모아서 제공 - p..
[소플] ch 12. State 끌어올리기 1. shared State - 공유된 state - 자식 컴포넌트들이 가장 가까운 부모 컴포넌트의 state를 공유해서 사용 - 어떤 컴포넌트의 state에 있는 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 - 부모 컴포넌트는 degree라는 이름의 섭씨온도 값을 갖고 있음 - 컴포넌트 C는 온도를 섭씨로 표현하는 컴포넌트 - 컴포넌트 F는 온도를 화씨로 표현하는 컴포넌트 - 자식 컴포넌트들이 각각 온도 값을 가지고 있을 필요 없이, 부모 컴포넌트의 state에 있는 섭씨온도 값을 변환해서 표시해주면 됨 2. 하위 컴포넌트에서 State 공유하기 - 사용자로부터 온도를 입력받아서 각각 섭씨온도와 화씨온도로 표현해 주고 해당 온도에서 물이 끓는지 안 끓는지를 출력해주는 컴포넌트 1) 물의 끓음 ..
[소플] ch 11. 폼 폼 - 사용자로부터 입력을 받기 위해 사용하는 것 1. 제어 컴포넌트 - 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 - 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 (input from element) - 제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리됨 - HTML 폼에서는 각 엘리먼트가 자체적으로 state를 관리하게 됨 - , , 가 각각 내부의 state를 관리하고 있음 - 제어 컴포넌트에서는 모든 데이터를 state에서 관리 - state 값을 변경할 떄는 setState() 함수를 사용 - 함수 컴포넌트에서는 useState() 훅을 사용하여 state를 관리 ex) - 태그의 value={value} 부분은 리액트 컴포넌트의 state에서 ..

티스토리툴바