본문 바로가기

NewLearn/React

 (11)
프로젝트 초기 셋팅하기 (CRA와 Backend 분리하기) /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ 아래 사진처럼, goodfaithbox(만들고자하는 프로젝트명)라는 폴더안에 frontend 폴더와 backend폴더를 만들어서 각각 진행하고자 한다. 이 때, frontend는 CRA를 이용하여 만들 예정이다. 지금부터 초기 셋팅을 시작해보자! 1. 우선 github에서 repository를 만들어준다. 2. 로컬에서 goodfaithbox 폴더를 만들고, 해당 폴더로 이동한 후 git init을 해준다. 3. .gitignore, readme.md, .gitmessage.txt를 작성한다. .gitignore # See https://help.github.com/a..
[React] useCallback() /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 첫 번째 파라미터 : 생성하고 싶은 함수 두 번째 파라미터 : deps 배열 (해당 배열의 어떤 값이 바뀌었을 때 함수를 생성해야하는지를 명시함.) 비어있는 배열을 넣을 경우, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용한다. 즉, 컴포넌트가 처음 렌더링될 때만 함수를 생성한다. 하지만 내용이 있는 배열을 넣을 경우, 해당 배열이 바뀌었을 때만 함수를 생성한다. 따라서 함수 내부에서 상태 값에 의존..
[React] useMemo() /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 첫 번째 파라미터 : 어떻게 연산할지 정의하는 함수 두 번째 파라미터 : deps 배열을 넣어준다. 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해준다. 반면에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용한다. useMemo를 통해, 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 도대체 이게 뭘까 궁금했는데, 공식 문서를 보니 다음과 같았다. 메모이제이션 된 값을 반환합니다...
[React] useReducer()* /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); useState의 대체함수로, 여러개의 하윗값들을 포함하는 state를 다룰 때 유용하게 사용된다. 즉, 간단한 state라면 useState를 써도 되지만, 복잡한 state인 경우에는 useReducer를 쓰면 편하다. setter 함수를 여러개 쓰지 않아도 된다는 소리다. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState 보다 useReducer 를..
[React] useEffect() * /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useEffect()란? useEffect(effect, deps); effect : useEffect가 동작할 함수 deps : deps 리스트에 있는 값일 때만 값이 변하도록 함. 리액트 컴포넌트가 렌더링될 때 마다 특정 작업을 수행하도록 설정한다. componentDidMount + componentDidUpdate + componentWillUnmount와 비슷하다. import React, { useState, useEffect } from "react"; const MyComponent = () => { const [number, setNumber] = us..
[React] map, filter를 이용한 예제 /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ map이란? 배열.map((현재 값) => 수행하고 싶은 일) arr.map(callback, [thisArg]) callback(currentValue(현재 요소), index(현재 인덱스), array(원본 배열)) thisArg : callback 함수 내부에서 사용할 this 레퍼런스 map 기본 예제 import React, { useState } from "react"; const MyComponent = () => { const [names, setNames] = useState([ { id: 1, text: '음악' }, { id: 2, text: '코딩..
[React] ref /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ ref란? DOM을 꼭 직접적으로 건드려야 할 때 사용한다. ex. 특정 input에 포커스 주기, 스크롤 박스 조작하기, canvas 요소에 그림 그리기 ⓐ 콜백 함수를 통한 ref 설정 ⓑ 클래스 컴포넌트에서의 ref : createRef ⓒ 함수형 컴포넌트에서의 ref : useRef ⓐ 콜백 함수를 이용한 ref import React from "react"; class MyComponent extends React.Component { handleFocus = () => { this.input.style.backgroundColor = 'blue'; } ren..
[React] 함수형 컴포넌트에서의 이벤트 핸들링* /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ 함수형 컴포넌트에서 이벤트 핸들링하기 import React, { useState } from "react"; const MyComponent = () => { const [form, setForm] = useState({ username: '', message: '', }); const { username, message } = form; const onChange = e => { const nextForm = { ...form, //기존의 form 내용 복사 [e.target.name]: e.target.value, } setForm(nextForm); } cons..
[React] useState() /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useState(); const [count, setCount] = useState(0); useState() : 함수형 컴포넌트에서도 state를 관리하기 위함. 인자는 state의 초깃값이 들어가며 반드시 객체가 아니어도 된다. useState()를 호출하면, 배열이 반환된다. 첫 번째 원소는 count라는 state이고, 두 번재 원소는 count를 바꾸어주는 함수(setter 함수)이다. ++ 원래 배열에 있는 값들을 추출하려면 const array = [1, 2]; const one = array[0]; const two = array[1]; const [on..
[React] 클래스 컴포넌트에서의 이벤트 핸들링 /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ 클래스 컴포넌트에서 이벤트 핸들링하기 import React, { useState } from "react"; class MyComponent extends React.Component { state = { message: '', } render() { return ( { this.setState({ message: e.target.value, }) } }> ); } } export default MyComponent; e는 이벤트 객체로 이벤트에 대한 다양한 정보를 제공한다. e.target을 해야 이벤트가 일어난 태그(input)에 접근할 수 있다. 우리가 mess..

티스토리툴바