본문 바로가기

JavaScript/React45

React) Hooks - useState, useEffect 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Hooks - useState, useEffect useState - 가장 기본적인 Hook - 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌 - 상태 관리 시 사용 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; useState 함수의 파.. 2022. 11. 15.
React) 컴포넌트의 라이프사이클 메소드 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트의 라이프사이클 메소드 모든 리액트 컴포넌트에는 라이프사이클 (생명 주기)이 존재합니다. 프로젝트 진행 시 컴포넌트를 처음으로 렌더링할 때 어떠한 작업을 처리하거나, 업데이트 전 후로 어떠한 작업을 처리해야 할 수도, 불필요한 업데이트를 방지해야 할 수도 있습니다. 이 때 라이프사이클 메소드를 이용하며, 클래스형 컴포넌트에서만 사용할 수 있습니다. (함수형은 Hooks 기능을 이용해 비슷하게 처리) 라이프사이클 메소드의 이해 - Will 접두사 : 어떤 작업을 작동하기 전에 실행되는 메소드 - Did 접두사 : 어떤 작업을 작동한 후에 실행되는 메소드 이러한 총 9가지의 메소드.. 2022. 11. 14.
React) 컴포넌트 반복 (map, filter, key) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 반복 웹 페이지를 만들다보면, 아래와 같이 반복되는 코드를 작성할 때가 있습니다. const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ) } export default IterationSample; 만일 코드가 복잡해지고 프로젝트 크기가 방대해진다면, 이는 파일 용량을 낭비 혹은 관리가 어려울 것입니다. 이 때 반복을 통해 중복을 없애줄 수 있습니다. 자바스크립트 배열의 map() 함수 - 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성 문법 arr.map(callbac.. 2022. 11. 14.
React) ref - 컴포넌트에 이름 달기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트에 ref 달기 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 씁니다. 사용법 {this.myComponent = ref}} /> 이렇게 설정하면, MyComponent 내부의 메소드 및 멤버 변수, ref에도 접근할 수 있습니다. 이를 이용해 스크롤 박스가 있는 컴포넌트를 하나 만들고, 스크롤바를 아래로 내리는 작업을 부모 컴포넌트에서 실행해보겠습니다. 컴포넌트 초기 설정 스크롤 박스 컴포넌트 파일 생성 ScrollBox.js import { Component } from "react"; class ScrollBox extends Component { ren.. 2022. 11. 11.
React) ref - DOM에 이름 달기, state를 이용해 기능 구현 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용하지만, 리액트에서는 ref를 사용합니다. ※ 리액트에서 id값이 아닌 ref를 사용하는 이유는? - 같은 컴포넌트를 여러 번 사용한다고 할 때, id는 유일해야 하는데, 중복 id를 가진 DOM이 여러 개 생길 수 있으니, 문제 발생 원인이 될 수 있음! ref: DOM에 이름 달기 ref를 사용해야 하는 상황 DOM를 직접적으로 건드려야 할 때 ref를 사용합니다. 예를 들어, javascript 혹은 jQuery로 만든 웹 사이트는 특정 input 요소를 찾을 때 해당 id값을 가진 input에 클래스를 설정해주곤 합니다.. 2022. 11. 11.
React) 이벤트 핸들링 (클래스형 컴포넌트, 함수형 컴포넌트) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 이벤트 핸들링 이벤트 사용 시 주의 사항 ① 이벤트 이름은 카멜 표기법으로 작성 - oncick → onClick 혹은 onkeyup → onKeyUp ② 이벤트에 실행할 자바스크립트 코드 전달이 아닌 함수 형태의 값을 전달 - 화살표 함수 문법으로 함수를 생성하여 전달 혹은 외부에 미리 만들어서 전달 ③ DOM 요소에만 이벤트 설정 가능 - div, button, input, form, span 등의 DOM 요소에는 이벤트 설정 가능하지만, 만든 컴포넌트에는 설정 불가 - 하지만, 전달받은 props 를 컴포넌트 내부의 DOM 이벤트로 설정은 가능 이벤트 종류 Clipboard To.. 2022. 11. 10.

티스토리툴바