JavaScript/React 검색 결과

해당 글 16건

React LifeCycle(수명 주기), 두 번 렌더링 되는 이슈

LifeCycle (수명주기) 예제를 진행하던 중 constructor에 consloe.log가 두 번 실행되어 있었습니다. LifeCycle 수명 주기 예제 소스 import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null }; myRef = null; //ref 설정할 부분 constructor(props) { super(props); console.log('constructor'); } /* props로 받아 온 값을 state에 동기화시키는 용도 컴포넌트가 마운트, 업데이트될 떄 호출 */ static getDerivedStateFromProps(ne..
JavaScript/React 2022. 4. 16. 00:31

React 클래스형 컴포넌트 constructor, super(props) 사용 이유

클래스 컴포넌트 예제 import React, { Component } from 'react'; class Example1 extends Component { constructor(props) { super(props); //state의 초깃값 설정 this.state = { number: 0 }; }; render() { const { number } = this.state; // state를 조회할 떄는 this.state로 조회 return ( {number} { this.setState({ number: number + 1 }); }} > + 1 ) } } export default Example1;​ constructor(props) 사용 이유 Component를 생성할 때 state 값을 초기..
JavaScript/React 2022. 4. 16. 00:00

React Props와 State의 차이

Props란 - properties를 줄인 표현 - 컴포넌트 자신은 해당 props를 읽기 전용으로 사용 - 컴포넌트 속성을 설정할 떄 사용하는 요소 - props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능. 부모 컴포넌트 App.js import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ; }; default export App; 자식 컴포넌트 MyComponent.js import React from 'react'; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다.; }; export defa..
JavaScript/React 2022. 4. 15. 21:43

React npm install 설치시 npm ERR! ERESOLVE unable to resolve dependency tree

package.json 파일로 node_modules를 다운받기 위해 npm install을 하면 하단과 같은 에러가 나온다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree ..... Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. ..... 버전이 맞지 않아 생긴 에러인거 같다 npm ERR가 알려준 명령어를 사용하여 해결함 1. npm install --force : ..
JavaScript/React 2022. 4. 15. 20:58

React Hooks 이란

리액트 훅(React Hook)? - 훅은 리액트 v16.8에 새로 도입된 기능 - 함수 컴포넌트에서 리액트 state와 라이프사이클 기능을 "연동" 할 수 있게 해주는 함수. - 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능 - 기존 함수현 컴포넌트에서 못하던 상태값 관리, 컴포넌트의 라이프사이클 함수를 이용할 수 있게 됨. 훅이 나오게 된 이유? 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠음 - 중복된 코드가 늘어남 로직이 UI 및 리액트 라이프사이클에 너무 밀접하게 결합되어 있음 - 중복된 코드가 늘어남 중복된 코드를 줄이기 위해 HOC(Higher Order Component) - 화면에서 재사용 가능한 로직을 분리해서 컴포넌트로 만들고, 재사용 불가능한 ..
JavaScript/React 2020. 8. 17. 14:31

React 라이프사이클 메서드 이해하기

컴포넌트 라이프사이클 메서드 이해하기 라이프사이클 메서드의 종류는 총 9가지 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 총 세 가지 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 - DOM(문서 객체 모델, Document Object Model)이 생성되고 웹 브라우 저상에 나타나는 것. - 위와 같은 마운트 시 사용하는 다음 메서드를 호출 constructor - 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps - props에 있는 값을 state에 넣을 떄 사용하는 메서드 render - 우리가 준비한 UI를 렌더링 하..
JavaScript/React 2020. 8. 17. 14:00

일정 관리 웹 어플리케이션 만들기 (2)

기능 구현하기 1. App에서 todos 상태 사용하기 src > App.js import React, { useState } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; const App = () => { const [todos, setTodos] = useState([ { id : 1, text : '리액트의 기초 알아보기', checked : true }, { id : 2, text : '컴포넌트 스타일링 해보기', checked : true }, { i..
JavaScript/React 2020. 8. 7. 00:50

일정 관리 웹 어플리케이션 만들기 (1)

UI 구성하기 1. 프로젝트 생성 //todo-app 프로젝트 생성 npm create react-app todo-app //Sass, 조건부 스타일링, 아이콘 라이브러리 설치 cd todo-app npm add node-sass classnames react-icons 2. Prettier 설정 //최상단 .prettierrc파일 생성 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 3. index.css 수정 /* src > index.css 수정 */ body { margin: 0; padding : 0; background : #e9ecef; }..
JavaScript/React 2020. 8. 6. 23:16

Window VS Code 설치(Visual Studio Code)

리액트 애플리케이션을 만들면서 사용할 코드 에디터 설치하기 https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com Windows 선택 확인 눌러주고 ..
JavaScript/React 2020. 8. 1. 13:26