React

[React] 컴포넌트 스타일링

일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만드는 것이 중요 [이름 짓는 규칙] 이름-클래스 (예 : App-header) BEM 네이밍 일종의 규칙을 준수해 해당 클래스가 어떤 용도로 사용되는지 명확하게 작성 .card_title-primary css Selector : 특정 클래스 내부에 있는 경우 스타일 적용 .App .logo { text-align : center; } Sass 자주 사용되는 css 전처리기 중 하나 확장된 CSS 문법을 사용 복잡한 작업을 쉽게 해주고 재활용성을 높여주며 코드의 가독성을 높임 .sass 확장자, .scss 확장자 모두 지원 여러 파일에서 사용되는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳..

[React] Hooks

useState 가장 기본적인 Hook 함수 컴포넌트에서 상태 관리를 할 때 사용 const [value, setValue] = useState(0); 첫번째 원소 (value) : 상태 값 두번째 원소 (setValue) : 상태를 설정하는 함수 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됨 useEffect 리액트 컴포넌트가 렌더링(나타날 때)될 때마다 특정 작업을 수행하도록 설정 클래스형 컴포넌트의 componentDidMount + componentDidUpdate useEffect(() => { console.log("렌더링 완료"); console.log({ name, nickname }); }); 컴포넌트가 화면에 맨 처음 렌더링될 때만..

[React] 컴포넌트의 라이프사이클 메서드

모든 리액트 컴포넌트에는 라이프사이클이 존재 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드 + 에러가 나타났을 때 호출되는 메서드 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능 함수컴포넌트에서는 사용할 수 없음 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있음 앞으로 사용할 일이 별로 없어 이 개념에 너무 많은 시간을 쏟지 말 것. 마운트(mount) DOM이 생성되고 웹 브라우저상에 나타나는 것 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 co..

[React] 컴포넌트 반복

반복적인 내용을 효율적으로 보여주고 관리하는 방법 map() 함수 자바스크립트 배열 객체의 내장 함수 기존 배열로 새로운 배열을 만드는 역할 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 예제 const numbers = [1, 2, 3, 4, 5]; const processed = numbers..

[React] ref : DOM에 이름 달기

클래스형 컴포넌트에서 ref를 사용하는 방법 함수 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 함 리액트에서 잘 사용하는 문법은 아니라 간략히 정리 DOM을 꼭 사용해야하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ref 사용 1. 콜백 함수 사용 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달 이 콜백 함수는 ref 값을 파라미터로 전달 받음 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정 {this.input = ref}} /> 2. createRef 사용 더 적은 코드로 쉽게 사용가능 리액트 v16.3부터 도입 import React, { Component } from "react"; class..

[React] 이벤트 핸들링

이벤트 핸들링 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 처리하는 것 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법을 작성 (ex : onClick, onKeyUp) 이벤트에 실행할 자바스크립트를 전달하는 것이 아닌 함수 형태의 값 전달 DOM 요소에만 이벤트를 설정 (DOM 요소 : div, button, input, span 등) React에서 이벤트 핸들링하기 onChange 이벤트 설정 { console.log(e.target.value); } } /> state에 input 값 담기 class EventPractice extends Component { state = { message : "" } // 초기값 설정 render() { return ( { this.setSt..

[React] 컴포넌트

컴포넌트 선언 방식 클래스형 컴포넌트 함수 컴포넌트 클래스형 컴포넌트 ES6 이전 버전에는 클래스가 없었고 이를 구현하려면 prototype이라는 문법을 사용 ES6 문법부터는 class를 사용하여 다음과 같이 작성 class Dog { constructor(name) { this.name = name; } say() { console.log(this.name + ": 멍멍"); } } const dog = new Dog("흰둥이"); dog.say(); // 흰둥이: 멍멍 클래스형 컴포넌트에는 render 함수가 꼭 필요 -> 그 안에서 보여줄 JSX를 반환해야함 그렇다면 함수형, 클래스형 어떤걸 사용해야할까? 함수형 장점 함수형 단점 클래스형 컴포넌트보다 선언하기 편함 state 사용 불가 클래스형 ..

[React] Virtual DOM

DOM(Document Object Model) 기존 웹이 사용하는 DOM의 Document는 HTML을 말한다. 브라우저를 공장이라고하면 html문서는 이 공장들에 보내주는 주문서이다. 이 주문서에는 내가 원하는 웹페이지의 요소들과 그 구조가 설계도처럼 표현되어 있다. (ex) 바디 태그 안에는 header태그랑 main 이런 구체적인 구조를 html이란 주문서에 담아 웹에 접속할 때 쓰는 브라우저에 보냄. 그러면 이 브라우저라는 공장에서 이 주문서를 보고 그 안의 html요소들 body, div,li,span, 같은것들을 실제 제품들로 제작함. 이 브라우저라는 공장에 들어가면 빈칸 또는 체크박스로 기능을 갖춘 실제 input 오브젝트로 만들어짐. 이처럼 html의 각 요소들이 브라우저에서 실제로 제작..