티스토리

LightSourceCoder

검색하기

블로그 홈

LightSourceCoder

scoring.tistory.com/m

어제보단 발전한 오늘의 나를 위한 블로그

구독자: 14

방명록 방문하기

주요 글 목록

[React] 카운터 구현하기 - 프레젠테이셔널, 컨테이너 컴포넌트 이글은 이전 글인 [React] 리덕스 - counter와 todos 모듈 만들고 합치기 와 이어집니다. [React] 리덕스 - counter와 todos 모듈 만들고 합치기 이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 공부하며 쓴 글입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패 scoring.tistory.com 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트란? 리덕스 스토어에 직접적으로 접근하지않고, 필요한 값 또는 함수를 props 로만 받아와서 사용하는 컴포넌트 주로 UI를 선언하는 것에 집중하며, 필요한 값이나 함수는 props로 받아와서 사용하는 형태로 구현 프리젠.. 공감수 1 댓글수 0 2022. 9. 21.
[React] 리덕스 - counter와 todos 모듈 만들고 합치기 이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 공부하며 쓴 글입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 리덕스 모듈이란? 액션 타입, 액션 생성함수, 리듀서가 모두 모여있는 자바스크립트 파일을 말한다. 이와 같은 항목을 하나의 파일에 몰아서 작성하는 방식을 Ducks 패턴이라고 한다. 프로젝트에 리덕스 적용 react-redux 라이브러리 설치 $ yarn add react-redux counter 모듈 만들기 mod.. 공감수 1 댓글수 0 2022. 9. 21.
[React] useEffect사용하기 이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 참고하여 쓴 글 입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us useEffect란? 컴포넌트가 마운트 됐을때(처음 나타났을 때), 언마운트 됐을때(사라질 때), 업데이트 됐을때(특정 props가 바뀔 때) 특정 작업을 처리 한다. React컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 하는데, 이를 함수형으로 사용할수 있.. 공감수 2 댓글수 1 2022. 9. 20.
[React] 배열에 항목 추가, 제거, 수정 이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 참고하여 쓴 글 입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 배열에 요소 추가하기 배열에 항목을 추가한다는 것은 변화를 주는 것이기 때문에 리액트에서의 불변성을 지켜주어야 한다. 따라서 useState에 등록된 setter에서 변화를 줄때, 배열의 push, splice, sort 등의 함수는 사용할 수 없다. 불변성을 지키면서 배열에 항목을 추가하는 방법 2가지 sprea.. 공감수 2 댓글수 1 2022. 9. 20.
[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 .. 공감수 0 댓글수 2 2022. 9. 19.
[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에 접근할 때 사용한다.. 공감수 1 댓글수 0 2022. 9. 19.
[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(.. 공감수 1 댓글수 0 2022. 9. 19.
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 부모 컴포넌트에서 여.. 공감수 0 댓글수 0 2022. 9. 12.
[React] Redux를 리액트 프로젝트에 사용해보기 이 포스팅은 저자 김민준 님의 ‘리액트를 다루는 기술’을 참고하여 작성되었습니다. React 프로젝트에서 Redux를 이용한 상태관리 리액트에서 리덕스를 사용할 때 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컨포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트 : 상태관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트 컨테이너 컴포넌트 : 리덕스와 연동된 컴포넌트로, 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 한다. 카운터 컴포넌트 만들기 숫자를 더하고 뺄 수 있는 카운터 컴포넌트 생성 components/Counter.js import React from 'react'; const Counter = ({ number, o.. 공감수 1 댓글수 0 2022. 8. 31.
[React] Redux 이해하기 리덕스란? JavaScript(자바스크립트) 상태관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. 리덕스를 사용하는 이유? 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스의 세 가지 규칙 1. Single source of truth(단일 스토어) 하나의 애플리케이션 안에는 하나의 스토어가 있다. 동일한 데이터는 항상 같은 곳에서 가지고 온다. 스토어라는 하나뿐인 데이터 공간이 있다는 의미 2. State is read-only(읽기 전용 상태) 상태를 업데이트 할때는 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다... 공감수 1 댓글수 0 2022. 8. 30.
[React] 리액트 라우터(react-router-dom) v6 사용법 프로젝트에 라우터 적용 $ yarn add react-router-dom 명령어 실행하여 라이브러리 설치 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); BrowserRouter라는 컴포넌트를 이용하여 App를 감싸면 라우터가 적용이 된다. 로 특정 주소에 컴포넌트 연결 Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여줄지 정의할 수 있.. 공감수 1 댓글수 0 2022. 8. 29.
[React] useCallback, useMemo, React.memo를 이용한 최적화 및 차이점 1. useMemo 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. Memoization된 값을 return 해주는 hook이다. memoization이란? 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술 UseMemo 사용법 function Component({a, b}) { const result = compute(a, b) return {result} } 만약 위에서 복잡한 연산을 수행하는 compute라는 함수가 있을때 사용할 수 있다. function Component({a, b}) { const result = useMemo(() => compute(a, b), [a.. 공감수 1 댓글수 0 2022. 8. 29.
[React] 리액트에서 불변성을 지키는 이유 리액트에서 불변성을 지키는 이유 불변성이란 사전적 의미로 값이나 상태를 변경할 수 없는 것을 의미한다. React가 불변성을 지키는 이유는 부모 컴포넌트가 re-rendering 되거나 State, Props 에 변화가 일어난 경우 렌더링이 일어나게 된다. 참조 타입(array 등)에서 객체나 배열의 값이 변할 때 원본 데이터가 변경 되어서 이 원본 데이터를 참조하고 있는 다른 객체에서 오류가 발생 할 가능성이 있기 때문에 프로그래밍의 복잡도가 올라간다. 리액트에서 화면을 업데이트할 때 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트 하기때문에 불변성을 지켜줘야 합니다. 불변성을 지키는 방법 참조타입을 변경하는 것이 아닌, 새로운 배열을 반환하는 메소드를 사용 스프레드 문법, map, filter,.. 공감수 1 댓글수 0 2022. 8. 2.
[React] Props 와 State [React] Props 와 State 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 부모 컴포넌트에서.. 공감수 0 댓글수 0 2022. 8. 2.
[React] Hooks란? Hooks는 무엇? Hooks는 React 16.8버전에 새로 추가된 기능이다 기존에 리액트에서 쓰던 클래스형 컴포넌트(Class component)의 단점들을 개선했다. React Hooks에서는 함수형 컴포넌트(Functional Component)를 사용한다. 기존에 사용하던 Class를 이용한 코드 작성 대신, Function에서 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 기존 Class Component의 단점 계층이 너무 많아진다. Component가 너무 복잡해진다. Class를 Component로 쓰면, bind, this를 사용하는데, 이는 컴퓨터의 많은 자원을 사용하며, 사람에게는 혼란을 야기한다. Hooks의 등장 Class 선언해서 사용하던 Componen.. 공감수 1 댓글수 0 2022. 8. 1.
[React] 가상돔 DOM 이란? Document Object Model (문서객체모델)의 약자이다. 문서 객체는 Web Browser에서 HTML 문서에 JavaScript가 접근할 수 있도록 를 객체로 만든 것 이다. 프로그래밍 언어가 DOM 에게 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다. 기존의 렌더링 방식 DOM tree 생성 → Render엔진이 HTML문서를 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정한다 CSSOM tree 생성 → Render엔진이 CSS 파일을 파싱해서 어떤 내용을 페이지에 렌더링 할지 결정한다. DOM 트리 + CSSOM 트리 를 결합해서 Render tree생성 Layout 생성 → 렌더트리로 각 노드의 위치와 크기를 계산한 Layout을 생성 Pai.. 공감수 3 댓글수 2 2022. 7. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.