본문 바로가기

React52

[리액트/에러해결] Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` ⚠️ 에러내용 ❓ 에러발생이유 styled-components를 사용해 input 컴포넌트를 생성한후 input 컴포넌트 안에 자식 태그를 넣어주었다 추가하기 const Input = styled.input` max-width: 350px; min-height: 10vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd; `; ❗️ 해결방법 input 태그는 자식 태그를 가질 수 없기 때문에 태그를 감싸주고 싶다면 div를 사용해야한다 2022. 5. 13.
[리액트] styled-components로 keyframe 구현하기 1. styled-components 설치하기 yarn add styled-components 2. keyframes import하기 import styled, { keyframes } from 'styled-components'; 3. keyframes 애니메이션 만들기 const 애니메이션이름 = keyframes` 0% { /* 애니메이션이 0% 진행했을때 적용할 스타일 */ } 50% { /* 애니메이션이 50% 진행했을때 적용할 스타일 */ } 100% { /* 애니메이션이 100% 진행했을때 적용할 스타일 */ } `; 4. keyframes로 만든 애니메이션을 속성값으로 넣어주기 const Box = styled.div` animation: ${애니메이션이름} 2s; `; 2022. 5. 10.
[리액트] import 구문에서 언제 중괄호 { }를 사용할까? (export와 export default의 차이점) 한 파일에 코드가 너무 길어지면 유지, 보수가 힘들기 때문에 기능별로 코드를 나눠 필요할때마다 불러주는 작업을 한다. 이를 모듈화라고 한다. 모듈이란 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미하며 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 이때 기능별로 쪼개진 모듈을 파일에 불러오기 위해 사용하는 키워드가 "import"다. 반대의 개념으로 export가 있는데 import할 수 있는 모든 모듈은 export로 내보내진 모듈이다. 리액트에서 라이브러리나 다른 컴포넌트를 불러올때도 import라는 키워드를 사용한다. 예를들어 App.js라는 컴포넌트에서 About.js라는 컴포넌트를 불러올때 또는 Home.js 컴포넌트에서 react-router-dom 라이브러.. 2022. 5. 4.
[리액트/한줄정리] index.js 있는 ReactDOM.render()란? ReactDOM.render( , document.getElementById('root') ); ReactDOM.render(첫번째 파라미터, 두번째 파라미터) 첫번째 파라미터: 무엇을 렌더시킬까 → 최상위 컴포넌트 두번째 파라미터: 어디에 렌더시킬까 → id가 root인 element 즉 public > index.html에 있는 id가 root인 요소 2022. 4. 30.
[리액트] 리덕스에서 Provider, useSelector, useDispatch 사용하기 1. Provider, useSelector, useDispatch 역할 Provider (컴포넌트) Provider 컴포넌트는 "State를 어떤 컴포넌트에게 제공할것인가"에 대한 가장 바깥쪽의 울타리를 정의하는 것을 말한다. 즉, Provider로 감싸고 있는 리액트 컴포넌트가 Store에 저장되어 있는 State에 접근이 가능하도록 해준다. useSelector (Hook) useSelector 훅은 Store에 저장된 state를 가지고와 사용할 수 있게 해준다. 저장소에 있는 어떤 state를 쓰고 싶은지 선택할때 사용. useDispatch (Hook) useDispatch 훅은 Store에 저장된 state의 업데이트를 요청해준다. 저장소에 있는 어떤 state를 업데이트하고싶을때 사용. 2.. 2022. 4. 23.
[리액트/한줄정리] 라이프 사이클(Life Cycle)이란? 라이프 사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 2022. 4. 21.
[리액트] 리덕스 정리 (전역상태관리란?) ⚠️ 이 포스팅은 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트 기초반 3-7 리덕스를 통한 리액트 상태관리 3-8 리덕스 살펴보기 3-9 리덕스 써보기 3-10 리덕스와 컴포넌트를 연결하자 3-11 컴포넌트에서 리덕스 데이터 사용하기 리덕스란? 리덕스란 전역 상태 저장소다. 상태란 데이터를 의미하므로 리덕스는 전역적(global)으로 관리하는 데이터 저장소를 말한다. 리덕스를 사용하지 않는 리액트 프로젝트는 컴포넌트 내부에서 상태를 설정하고 업데이트해주는 지역적(local)인 방식으로 상태관리를 해주었다. 하지만 리덕스를 사용하면 상태를 저장해주는 데이터 저장소가 따로 생겨 컴포넌트 내부에서는 상태관리를 해주지 않아도 된다... 2022. 4. 20.
[리액트/한줄정리] props와 state란? props 자식 컴포넌트가 부모 컴포넌트한테 전달받은 데이터 부모에게 전달받은 state 값 state 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터 본인 컴포넌트에 설정되어 있는 state 값 2022. 4. 12.
[리액트] 클래스형, 함수형 컴포넌트에서 state 값 관리하기 (state 설정과 업데이트) state란 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터를 의미한다. 클래스형 컴포넌트와 함수형 컴포넌트가 state를 설정하고 업데이트하는 방법에는 차이가 있다. 클래스형 컴포넌트 import React from 'react'; class StateClass extends React.Component { constructor(props) { super(props); this.state = { name: 'maple', }; } onClick = () => { this.setState({ name: 'lavender', }); }; render() { return ( 안녕하세요 저는 {this.state.name}입니다 이름을 라벤더로 바꾸기 ); } } export default StateClass.. 2022. 4. 12.
[리액트] react-router-dom v5 사용법 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술 13장 리액트 라우터로 SPA 개발하기 리액트 기초반 3-3 리액트에서 라우팅 처리하기 (1) 3-4 리액트에서 라우팅 처리하기 (2) 1. react-router-dom 라이브러리 v5 설치하기 yarn add react-router-dom@5.2.1 2. index.js에 BrowserRouter 적용하기 로 프로젝트에 라우터를 적용한다. 컴포넌트는 1) 사용자가 입력한 주소를 감지하는 역할 2) 여러 종류의 라우터 컴포넌트를 제공 3) 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로.. 2022. 4. 11.
[리액트/한줄정리] 라우팅이란? 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정 브라우저 주소에 따라 다른 페이지를 보여주는 것 2022. 4. 11.
[리액트] MPA(Multi-Page Application) vs SPA(Single-Page Application) 장단점 정리 MPA(Multi-Page Application) 여러개의 HTML 파일로 이루어져 있는 애플리케이션 새로운 페이지를 요청할 때마다 서버에서 정적 리소스가 다운되고 그에 맞춰 전체 페이지를 다시 렌더링한다 사용자에게 보이는 화면은 서버측에서 준비하는 SSR(Server Side Rendering) 방식을 사용한다 장점 1. 첫로딩이 빠르다 요청받은 페이지에 정적 리소스만 받아오기 때문에 처음 페이지를 로딩하는 작업이 빠르다. 2. SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다 MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링하기에 적합하다. 단점 1. 다른 페이지와 겹치는 컴포넌트를 매번 다시 불러와야 한다 header.. 2022. 4. 11.
[리액트] 리액트에서 state를 직접 수정하면 안되는 이유 (데이터의 불변성) state란? state는 컴포넌트 내부적으로 사용되는 값을 말하며 state 값이 업데이트 될때 리액트 전체가 리렌더링이 된다. 리액트에서 state를 직접 수정하는 예제 (잘못된 방법) import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { animals: ["cat", "elephant", "dolphin"] }; } // setState()함수 안에서 기존 animals 배열에 "dog"를 직접 추가했다 onClick = () => { this.setState({ animals: ["cat", "elephant", "dolphin", "dog"] }) .. 2022. 4. 8.
[리액트/한줄정리] 단방향 데이터 흐름이란? 단방향 데이터 흐름이란 리액트에서는 데이터는 하나의 방향 즉 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 이론. 2022. 4. 8.
[리액트] 스프레드 문법으로 state에 값 추가해주기 1. 스프레드 문법(spread operator)이란? 자바스크립트의 스프레드 문법은 배열이나 객체 앞에 ...을 붙여 안에 있는 모든 요소를 복사해 꺼내주는 문법이다. 일반적으로 요소를 밖으로 꺼내준 후 다른 배열이나 오브젝트에 할당할때 사용된다. 리액트에서 스프레드 문법은 concat 메서드와 같이 state에 값을 추가할때 사용된다. 2. 자바스크립트 스프레드 문법 예시 2.1 배열 const array = [1, 2, 3, 4]; newArray = [...array, 5]; console.log(newArray) // [1, 2, 3, 4, 5] 코드해석 1) array이라는 변수에 배열 [1, 2, 3, 4]가 할당되어있다 2) 스프레드 오퍼레이터(...) 문법으로 array에 있는 모든 값을.. 2022. 4. 8.
[리액트] ref로 리액트의 돔요소 가져오기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술: 5장 ref: DOM에 이름 달기, 8장 Hooks 5.1 ref는 어떤 상황에서 사용해야 할까? 5.2 ref 사용 5.3 컴포넌트에 ref 달기 5.4 정리 8.6 useRef 리액트 기초반 2-10 Ref! 리액트에서 돔요소를 가져오려면? 1. ref란? HTML 웹사이트에서 DOM 요소를 가져와 작업하고 싶을때는 id를 붙여 접근한 후 CSS에서 특정 스타일을 적용하거나 JavaScript로 getElementById와 같은 DOM Selector 함수를 사용해서 DOM을 선택한다. HTML에서 DOM 요소.. 2022. 4. 7.
[리액트/에러해결] Warning: Each child in a list should have a unique "key" prop 해결방법 ⚠️ 에러내용 원문 Warning: Each child in a list should have a unique "key" prop. 해석 리스트 안에 있는 각각의 자식 요소가 유니크한 key를 가져야한다. ❓ 에러발생이유 리액트에서 map을 사용해 리스트를 만들때 각 리스트에 식별자로서 key값을 부여해야한다. 리액트는 key를 사용해서 어떤 요소가 변경되었는지를 파악한다. ❗️ 해결방법 map을 사용해 리스트를 만들때 key값을 부여해준다. 일반적으로 key값으로 id를 많이 사용하지만 key값으로 마땅한 데이터가 없다면 index를 key값으로 지정해줄 수도 있다. index를 key값으로 지정한 예제 import React from 'react'; class RefClass extends React.. 2022. 4. 7.
[리액트/에러해결] reactdom.render is no longer supported in react 18 해결방법 ⚠️ 에러내용 원문 ReactDOM.render is no longer supported in react 18. Use CreateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 해석 기존 index.js에서 사용했던 ReactDOM.render라는 코드는 리액트 18 버전에서는 더 이상 지원하지 않기 때문에 ReactDOM.render 코드 대신에 CreateRoot를 사용해라. ReactDOM.render를 사용하면 리액트 프로젝트는 17버전처럼 동작할것이다. ❓ 에러발생이유 리액트가 업데이트 되면서 index.js에서 App 컴포넌트를 렌더링할때 사용하던 ReactDOM.re.. 2022. 4. 7.
[리액트] styled-components로 리액트 프로젝트에 스타일링 넣기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술: 9장 컴포넌트 스타일링 9.4 styled-components 리액트 기초반 2-8 화면을 예쁘게! - styled-components styled-components란? 컴포넌트 스타일링 기법 중 하나로 자바스크립트 파일 안에 스타일을 선언하는 CSS-in-JS 방식 컴포넌트에 직접 스타일을 입히기 때문에 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다 styled components의 장점 1) 자바스크립트 파일 하나에 스타일까지 작성할 수 있기 때문에 스타일 파일을 따로 만들지 .. 2022. 4. 6.
[리액트] 리액트에서 자주 쓰이는 자바스크립트 배열의 메서드 3가지 (concat, filter, map) 리액트에서 객체나 배열을 업데이트 해야할때 주의점 직접 접근해 업데이트 할 수 없다 불변성을 지켜주면서 업데이트를 해야한다 (기존 배열이나 객체의 복사본을 업데이트) 기존 코드를 변화시키는 배열의 메소드를 사용할 수 없다 push(추가), splice 기존 코드를 변화시키지 않는 배열의 메소드만 사용해야한다 concat(추가), filter(삭제), map(수정) 불변성이란? 리액트에서 객체나 배열을 업데이트할때는 불변성(immutable)을 지켜주면서 업데이트를 해야한다. 불변성이란 상태가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다. 즉 리액트에서 어떤 값을 업데이트하기 위해서는 상태 변경을 하지 않아야 한다는 것이다. 상태를 변경하지 않고 어떻게 업데이트를 할 수 있을까? 정답은 업데이트를.. 2022. 3. 30.