본문 바로가기

전체 글182

[리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 모든 리액트 컴포넌트는 라이프사이클(생명주기)이 존재하고, 이 수명은 페이지에 렌더링되기 전의 준비 과정에 시작해 페이지에서 사라질 때 끝난다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드는 총 9 가지이다. Will 접두사가 붙은 메서드는 작업을 작동하기 전에 실행되는 메서드, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 총 3 가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다. 마운트 DOM이 생성되고 페이지에 컴포넌트가 나타나는 것을 말한다. 컴포넌트 만들기 → constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생.. 2022. 8. 16.
[리액트를 다루는 기술] 컴포넌트 반복 데이터 배열을 컴포넌트 배열로 변환하기 const numbers = [ 1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); // [1, 4, 9, 16, 25] import React from 'react'; const IterationSample = ( ) => { const names = ['눈사람', '얼음', '눈', '바람']; const nameList = names.map(name => {name}); return {nameList}; }; export default IterationSample; map으로 생성된 배열 값을 사용하여 JSX 코드로 된 배열을 새로 생성한 뒤 nameLIst에 담았.. 2022. 8. 15.
[리액트를 다루는 기술] ref: DOM에 이름 달기 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref의 개념이다. 리액트 컴포넌트 안에서 id를 사용할 수 있기는 하지만, 같은 컴포넌트를 여러 번 사용할 경우, 중복 id를 가진 DOM이 여러 개 생기는 상황이 되기 때문에 권장하지 않는다. 하지만, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 경우에는 컴포넌트를 만들 때마다 id 뒷 부분에 추가 텍스트를 붙여서 (ex. button01, button02, ...) 중복 id가 발생하는 것을 방지해야 한다. ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용한다 !.. 2022. 8. 14.
[리액트를 다루는 기술] 컴포넌트, 이벤트 리액트의 컴포넌트 컴포넌트 선언 방식 1. 함수형 컴포넌트 2. 클래스형 컴포넌트 차이점으로 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. 하지만, v16.8 업데이트 이후 함수형 컴포넌트도 Hooks 기능이 도입되여 state와 라이프사이클 API 사용이 가능해졌다 ! 리액트 공식 매뉴얼에서는 컴포넌트 새로 작성시 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다. 클래스형 컴포넌트에는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다. ES6 문법에서 화살표 함수는 함수를 표현하는 새로운 방식으로 도입되었다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다 ! 다만, 일반 함수 표기법과의 차.. 2022. 8. 13.
[한 입 리액트] React에서 배열 사용하기 1 - 리스트 렌더링(조회) React에서 리스트 사용하기 Array.map((it) => cf. ctrl + s : 프리티어로 예쁘게 정렬됨 일기 목록을 보여줄 때, map 이용해 객체로 되어 있는 데이터를 props로 활용, DiaryList 컴포넌트에게 dummyList를 diaryList라는 이름의 prop으로 전달. 위와 같이 작성하면, 이런 에러가 뜰 것이다. 리스트의 각각의 자식요소는 고유한 키를 가져야 한다 ! 이 자식들의 부모 태그에 key prop을 설정해준다. (위에서 프롭 중 아이디가 고유하게 있어 활용한 것) (만약에 아이디와 같은 고유값이 없다면, map의 파라미터로 it 외에 idx를 하나 더 추가하면 된다. 다만, idx로 키를 정하면 데이터를 자리를 바꾸거나 해서 idx가 달라지면서 문제가 될 수 있다.. 2022. 8. 11.
[한 입 리액트] React에서 사용자 입력 처리하기/ DOM 조작하기 - useRef 동작이 비슷한 state들(author, content)은 다음과 같이 하나의 state로 묶어줄 수 있다. props을 나열하는 스프레드 연산자 ...를 이용하여 리팩토링 ! state를 묶어줬으니 setState도 묶어서 표현하니 위와 같다. 앞에는 데이터인 state의 props을 나열, 뒤에는 각 prop의 종류(이름)에 따른 값을 받아 변경시켜주는 함수 App.css 파일에 작성해 스타일 만듬 DOM 요소에 접근해야 할 때, useRef를 이용한다. 다음의 코드는 DOM 요소를 선택하는, useRef()라는 기능으로 만든 레퍼런스 객체 authorInput는 현재 가리키는 값(.current)을 포커스(.focus) 기능을 사용하여 포커스하게 한 것이다. 2022. 8. 11.
[한 입 크기로 잘라 먹는 리액트] JSX : JavaScript Extension (JS+HTML) cf. 자바스크립트 모듈 시스템 ES 모듈 CommonJS ES 모듈은 ES6에 도입된 JS 모듈 시스템. 내보내기: named export(변수 앞에 export 붙여서), export default / 불러오기: import CommonJS는 NodeJS 환경을 위해 만들어진 모듈 시스템. 내보내기: exports(exports.변수 형식으로), module.exports(module.exports = { 객체 형식(변수, 변수, ...) }으로) / 불러오기: require(require('./파일명') 형식으로) 리액트는 보통 ES 모듈 사용, export default 사용하여 하나의 기본 함수를 내보냄. 단, 모듈 당 하나만 가.. 2022. 8. 11.
리액트 콘솔에 콘솔로그가 두 번씩 찍히는 이유 이에 대한 답을 구했을 때, 대답해주신 분이 알려주신 링크가 있어 소개한다. ttps://jeonghwan-kim.github.io/2022/05/20/react-strict-mode 바로 이러한 이유로 콘솔에 두 번씩 출력되었던 것. 참고로 개발 버전에서 운영 버전으로 바꾸면 이러한 현상이 사라진다고 하는데, 리액트 개발 버전과 운영 버전에 대해서는 더 알아봐야할 듯 싶다 ! 2022. 8. 11.
[리액트] Virtual DOM 기존의 DOM에서는 변화가 생기면 웹페이지에 바로바로 업데이트를 해서 변경된 요소를 보여줬지만, Virtual DOM은 업데이트 내용을 미리 가상 DOM에 업데이트 시켜본 뒤, 그러한 변경 내용을 가상 DOM에 모아두었다 한 번에 업데이트시킬 수 있게 한다. 여러 번의 렌더링 과정을 한 번으로 단축시키기 때문에 그만큼의 연산을 하지 않게 되어 과다 연산의 문제를 해결할 수 있다. 2022. 8. 10.
[리액트] 강의 복습하기 CRA(create-react-app)이란? React 프로젝트를 위한 boilerplate(보일러를 찍어내는 틀 => 빵 틀의 역할을 하는 패키지를 의미함) 리액트에서 공식적으로 제공하는 이미 세팅이 완료된 패키지 : 리액트 + 웹팩 + 바벨 https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org CRA로 react 프로젝트생성하기 npx create-react-app my-app(프로젝트 이름) [--template typescript] npx: 패키지임시설치및실행 ht.. 2022. 8. 9.
모자튜 스터디 - 옵셔녈 체이닝, 심볼 https://www.notion.so/20f5f004c1924bf0a387775e8aef1a39 이한나 - 옵셔널 체이닝 ‘?.’, 심볼형 📝 옵셔널 체이닝(Optional Chaining) www.notion.so 2022. 8. 9.
모자튜 스터디 - 배열과 메서드 https://www.notion.so/iterable-b6a37dbb3f7f4818af80dc3aa978a7f6 이한나 - 배열과 메서드, iterable 객체 📝 배열과 메서드(Array Method) www.notion.so 2022. 8. 9.