Front-End/React

[React] 카운터 구현하기 - 프레젠테이셔널, 컨테이너 컴포넌트

이글은 이전 글인 [React] 리덕스 - counter와 todos 모듈 만들고 합치기 와 이어집니다. [React] 리덕스 - counter와 todos 모듈 만들고 합치기 이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 공부하며 쓴 글입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패 scoring.tistory.com 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트란? 리덕스 스토어에 직접적으로 접근하지않고, 필요한 값 또는 함수를 props 로만 받아와서 사용하는 컴포넌트 주로 UI를 선언하는 것에 집중하며, 필요한 값이나 함수는 props로 받아와서 사용하는 형태로 구현 프리젠..

[React] 리덕스 - counter와 todos 모듈 만들고 합치기

이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 공부하며 쓴 글입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 리덕스 모듈이란? 액션 타입, 액션 생성함수, 리듀서가 모두 모여있는 자바스크립트 파일을 말한다. 이와 같은 항목을 하나의 파일에 몰아서 작성하는 방식을 Ducks 패턴이라고 한다. 프로젝트에 리덕스 적용 react-redux 라이브러리 설치 $ yarn add react-redux counter 모듈 만들기 mod..

[React] useEffect사용하기

이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 참고하여 쓴 글 입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us useEffect란? 컴포넌트가 마운트 됐을때(처음 나타났을 때), 언마운트 됐을때(사라질 때), 업데이트 됐을때(특정 props가 바뀔 때) 특정 작업을 처리 한다. React컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 하는데, 이를 함수형으로 사용할수 있..

[React] 배열에 항목 추가, 제거, 수정

이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 참고하여 쓴 글 입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 배열에 요소 추가하기 배열에 항목을 추가한다는 것은 변화를 주는 것이기 때문에 리액트에서의 불변성을 지켜주어야 한다. 따라서 useState에 등록된 setter에서 변화를 줄때, 배열의 push, splice, sort 등의 함수는 사용할 수 없다. 불변성을 지키면서 배열에 항목을 추가하는 방법 2가지 sprea..

[React] map을 이용한 배열 렌더링하기

배열 렌더링 하기 import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( {users[0].username} ({users[0].email}) {users[1].username} ({users[1].email}) {users[2].username} ({users[1].email}) ); } export ..

[React] useRef란? useRef의 사용

2022.09.19 - [라이브러리/React] - [React] input태그 상태 관리 [React] input태그 상태 관리 input 태그 상태 관리하기 inputSample.js 생성 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; App.js 에서 렌더링 import React from 'react'; im.. scoring.tistory.com 이 글은 이전 글인 input태그 상태관리와 연계 됩니다. useRef란? javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector 특정 DOM에 접근할 때 사용한다..

[React] input태그 상태 관리

input 태그 상태 관리하기 inputSample.js 생성 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; App.js 에서 렌더링 import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; useState를 활용해서 input 객체 상태 관리 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(..

Props란? Props를 사용하는 방법

Props란? Props의 사용방법 Props란? Props는 Properties의 줄임말이다. 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터등을 전달하는 방법 Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변경하고 싶으면 부모 컴포넌트에서 state를 변경 시켜야한다.) Props의 사용 //App.js const App = () => { return //Text.js const Text = ({text}) => { return {text} } 위의 코드는 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 Props를 사용해서 “Hello world!” 라는 문자열 데이터를 전달했다. 여러개의 Props 와 defaultProps 부모 컴포넌트에서 여..

[React] Redux를 리액트 프로젝트에 사용해보기

이 포스팅은 저자 김민준 님의 ‘리액트를 다루는 기술’을 참고하여 작성되었습니다. React 프로젝트에서 Redux를 이용한 상태관리 리액트에서 리덕스를 사용할 때 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컨포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트 : 상태관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트 컨테이너 컴포넌트 : 리덕스와 연동된 컴포넌트로, 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 한다. 카운터 컴포넌트 만들기 숫자를 더하고 뺄 수 있는 카운터 컴포넌트 생성 components/Counter.js import React from 'react'; const Counter = ({ number, o..

[React] Redux 이해하기

리덕스란? JavaScript(자바스크립트) 상태관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. 리덕스를 사용하는 이유? 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스의 세 가지 규칙 1. Single source of truth(단일 스토어) 하나의 애플리케이션 안에는 하나의 스토어가 있다. 동일한 데이터는 항상 같은 곳에서 가지고 온다. 스토어라는 하나뿐인 데이터 공간이 있다는 의미 2. State is read-only(읽기 전용 상태) 상태를 업데이트 할때는 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다...