본문 바로가기

JavaScript136

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.
React) state에 대해서 (클래스형 컴포넌트의 setState, 함수형 컴포넌트의 useState) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. state - 컴포넌트 내부에서 바뀔 수 있는 값 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. 즉, props를 변경하려면 부모 컴포넌트에서 바꿔줘야 하는 것이죠. 그에 반면 state는 컴포넌트 내부에서 값을 변경할 수 있습니다. 클래스형 컴포넌트의 state Counter.js import { Component } from "react"; class Counter extends Component { constructor(props) { super(props); // state 초깃.. 2022. 11. 1.

티스토리툴바