일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 리덕스
- 가상회선교환
- redux
- typescript
- list
- useCallback
- await
- 리사이클러뷰
- pull
- merge
- 공부
- async
- 웹
- 리액트
- useState
- php문법
- 리액트를 다루는 기술
- 자동반영
- javascript
- Kotlin
- 컬러구성
- react
- equalityFn
- Git
- list.map
- createPortal
- 비동기처리
- rebase
- hot Reloading
- CSS
- Today
- Total
목록전체 글 (50)
공부블로그
일정관리 웹 애플리케이션을 만들어 보자. 10. 1 ) 프로젝트 준비하기 1. 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create-app todo-app 으로 새로운 프로젝트를 생성하고 $ yarn add node-sass classnames react-icons 로 필요한 라이브러리를 설치한다. //react-icons는 리액트에서 아이콘을 사용할 수 있는 라이브러리로, SVG형태로 이루어진 아이콘을 리액트 컴포넌트처럼 쉽게 사용할 수 있다. 2. Prettier 설정 2장에서 배웠던 Prettier를 설정하여 코드를 작성할 때 코드 스타일을 깔끔하게 정리해보자. 프로젝트의 최상위 디렉터리에 .prettierrc를 작성 3. index.css 수정 4. App컴포넌트 초기화 ( 프로젝트 ..
리액트에서 컴포넌트를 스타일링할 때는 다음 방식들을 사용한다. 일반 css : 컴포넌트를 스타일링하는 가장 일반적인 방식 Sass : 자주 사용되는 css 전처리기 중 하나로, 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있다. CSS Module : 스타일링을 작성할 때 css 클래스가 다른 css클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 9. 1 ) 가장 흔한 방식, 일반 CSS 프로젝트는 일반 css방식으로 만들어져 있다. 소규모 프로젝트를 개발하고 있다면 기본 css 시..
Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 리액트 내장 Hooks를 사용하는 방법을 배우고 커스텀 Hooks를 만들어보자. 8. 1 ) useState useState는 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있도록 해준다. ( 3장에서 배움 ) Counter. js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 // value값 업데이트 setValue(val..
함수형 컴포넌트로 작성 App. js import React from "react"; import Counter from "./Counter"; const App = () => { return 컴포넌트; //props사용 }; export default App; Counter. js // input을 두개 받아서 + or - 버튼을 누르면 연산하기 import React, { useState } from "react"; //함수형 컴포넌트라 useState사용 const Counter = ({ role, children }) => { //props파라미터로 받기 const [number, setNumber] = useState({ one: "", two: "" }); //객체 초기값 const [resu..
import React from 'react'; import './App.css'; const App = () => { const name='리액트'; return {name}; } /* function App() { const name = '리액트'; return {name}; } */ export default App; - render( )필수 import React, { Component } from 'react'; class App extends Component { render() { const name='리액트'; return {name}; } } export default App; function App( ) { ... }, class App ..
모든 리액트 컴포넌트에는 라이프사이클( 수명주기 )이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프사이클 메서드를 사용한다. (라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있고, 함수형에서는 Hooks기능을 사용해 비슷한 작업을 처리할 수 있다.) 7. 1 ) 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이..
눈사람 얼음 눈 바람 웹 애플리케이션을 만들다 보면 위와 같이 형태가 계속 반복되는 경우가 있다. 리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법에 대해서 알아보자. 6. 1 ) 자바스크립트 배열의 map( )함수 map( ) : 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 변환하고 새로운 배열을 생성한다. 6. 1. 1 ) 문법 arr.map( callback, [thisArg] ) callback: 새로운 배열 요소를 생성하는 함수로 3개의 파라미터를 받는다. ( currentValue: 현재 처리하고 있는 요소, index: 의 인덱스값, array: 현재 처리하고 있는 원본 배열 ) thisArg: callback함수 내부에서 사용할 this 레퍼런스 6. 1. 2 ) 예제 ..
일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다. 이를 통해 css에서 특정 id에 스타일을 적용하거나, 자바스크립트에서 해당 id요소를 찾아 작업할 수 있다. 이와 비슷하게 리액트에서 DOM에 이름을 다는 방법이 바로 ref 이다. 우선 state를 사용한 예제를 작성해보자. App. js import React, { Component } from "react"; import ValidationSample from "./ValidationSample"; class App extends Component { render() { return ; } } export default App; ValidationSample. css .success { background-color: lightgre..