후니's Blog

React/2022-上

JSX

2022.03.22

JSX JSX는 JavaScript에 XML을 추가한 확장 문법이다. 리액트로 프로젝트를 개발할 때 사용됨 -> 공식적인 자바스크립트 문법이 아님 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함 JSX 문법 규칙 ① 반드시 부모 요소 하나가 감싸는 형태 └ 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함 ⑴ 부모 요소 하나로 감싸줘야하는 이유가 무엇일까요? → Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문. ⑵ 무조건 요소를 사용하여 감싸야 할까요? → 그렇지 않다. Fragment라는 기능을 사용할 수도 있음. Fragment는 혹은 의 형태로 표현할 수 ..

Web Basic/JavaScript

Array의 필수 메서드(02)

2022.03.21

배열 전체 순회 forEach() map(), for()과 비슷한 기능을 하며, 주어진 함수를 배열의 각 요소에 실행시킴 map()과 다르게 forEach()는 배열을 리턴하지 않음 undefined를 리턴 arr.forEach(() => { //각 배열의 원소에 반복하고 싶은 코드 }) 배열을 반환하고 싶다면 빈배열 안에 push 해서 넣어주어야 함 ※ 새로운 배열이 필요할 때는 map을 사용 / 배열은 필요없지만 반복문을 사용할 때는 forEach 사용 forEach는 배열을 순회하는 도중에 멈출 수 없지만, 배열을 순회하는 속도가 빠름 배열 탐색(원하는 요소 찾기) indexOf() 배열에 특정 원소가 있는지 탐색하고 찾은 첫번째 요소의 인덱스를 반환 존재하지 않으면 -1을 반환 arr.indexO..

Web Basic/JavaScript

Array의 필수 메서드 (1)

2022.03.21

배열에 원소를 추가하거나 제거하는 메서드 push / pop 배열의 맨뒤에 추가(push)하고 제거(pop)하는 메서드 // push let fruits = ["포도, "복숭아", "딸기", "수박"] fruits.push("샤인 머스캣", "귤") // 결과 fruits = ["포도", "복숭아", "딸기", "수박", "샤인 머스캣", "귤"] // pop let fruits = ["포도", "복숭아", "딸기", "수박"] let one = fruits.pop() // 결과 one = "수박" fruits = ["포도", "복숭아", "딸기"] push는 한번에 여러개의 원소를 넣어줄 수 있음 pop은 빼올 수 있는 원소가 고정적 (배열의 맨 뒤 원소) push는 새롭게 추가된 원소를 반영하여 새로..

React/Errors

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

2022.01.16

이런 에러문구가 발생한다면 를 로 묶어주어야 합니다. 또한 의 매개변수 이름또한 component → element로 변경이 되었습니다. # 해결 방법 (2022. 01. 16 기준) 1. 아래와 같이 최신버전에 맞게 작성한다. 2. 이전 버전을 설치해서 사용한다. React Router | Overview Declarative routing for React apps at any scale reactrouter.com

React/Higher-Order

하이어오더(1) - 커링

2022.01.14

커링 반환값이 함수인 디자인 패턴을 말함 중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 언제든지 사용할 수 있음 커링을 사용하는 이유 : 함수의 재활용 때문 함수의 재활용 예시 : function multiply(a, b) { return a * b; } function mulitplyTwice(a) { return multiply(a, 2); } // ⓐ function multiplyX(x) { return function(a) { return multiply(a, x); } } // ⓑ const multiplyX = x => a => multiply(a, x); // ⓒ └ ⓐ : multiply() 함수를 재활용하여 a에 2를 곱한 값을 반환함 └ ⓑ : 인자 x를 받아 이름 ..

React/Component

컴포넌트 (6) - 콜백 함수, 이벤트 처리

2021.09.11

컴포넌트에서 콜백 함수 콜백 함수란 정의된 위치에서 실행되지 않고, 이후 특정 상황에서 실행되는 함수를 말함 하위 컴포넌트에서 프로퍼티를 변경해야 할 때 프로퍼티 원본을 수정할 수 있는 함수를 하위 컴포넌트에 제공하면 됨 따라서, 콜백 함수를 프로퍼티로 전달하면 됨 콜백 함수로 프로퍼티 수정 : (src/App.js) import React from 'react'; import Counter from './ex/Counter2'; class App extends React.Component { constructor(props) { super(props); this.state = { count: 1 }; } increase() { this.setState(({ count }) => ({ count: cou..

React/Component

컴포넌트 (5) - 클래스형, 함수형, 배열

2021.09.10

클래스형 컴포넌트 클래스형 컴포넌트는 리액트 생명주기 함수와 컴포넌트 구성 요소를 모두 포함하고 있음 클래스형 컴포넌트는 Component와 PureComponent의 두 종류의 클래스를 사용함 Component Component 클래스는 프로퍼티, state와 생명주기 함수가 들어있는 구조의 컴포넌트를 만들 때 사용함 Component 클래스로 만들어진 컴포넌트는 항상 render() 함수를 호출함 Component 예시 : import React from 'react'; class MyComp extends React.Component { constructor(props) { super(props); console.log('생성'); } componentDidMount() { } myMethod() ..

React/Component

컴포넌트(4) - 생명주기

2021.09.08

컴포넌트 생명주기 컴포넌트의 생명주기란 컴포넌트의 생성부터 소멸까지의 과정을 말함 컴포넌트는 생명주기마다 함수를 가지고 있어서 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수 있음 생명주기 함수 생명주기 함수는 render() 함수를 포함한 총 8개의 함수가 있음 생명주기 함수는 리액트 엔진에서 자동으로 호출함 따라서, 개발자가 마음대로 생명주기 함수를 호출할 수 없음 └ 생성 과정 : 컴포넌트 생성부터 생성 완료까지 4개의 생명주기 함수가 호출됨 └ 갱신 과정 : 생성 완료부터 갱신 완료까지 5개의 생명주기 함수가 호출됨 이 때, 갱신 과정은 shouldComponentUpdate() 함수의 반환값이 true이면 이후 과정이 진행되고, shouldComponentUpdate() 함수의 ..

전체 글

JSX

Array의 필수 메서드(02)

Array의 필수 메서드 (1)

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

하이어오더(1) - 커링

컴포넌트 (6) - 콜백 함수, 이벤트 처리

컴포넌트 (5) - 클래스형, 함수형, 배열

컴포넌트(4) - 생명주기

티스토리툴바