본문 바로가기

리액트19

리액트 프로젝트에서 타입스크립트 사용하기 출처 https://react.vlpt.us/using-typescript/ JavaScript 는 weakly typed 언어이기에, 특정 숫자 변수를 선언한 다음에 변수에 문자열을 넣을 수도 있고, null 을 넣을 수도 있고, 배열을 넣을 수도 있습니다. let value = 5; value = '안녕하세요'; value = [1,2,3,4,5]; value = null 추가적으로 자동완성도 우리가 Java / C# / C++ / Python 등의 언어를 사용 할 때처럼 제대로 되지 않습니다. (VSCode 를 사용하면 어느정도 되고 있다고 착각 할 수도 있는데 사실 TypeScript 관련 기능이 이미 기본적으로 돌아가고있어서 되는 거랍니다.) 만약에 TypeScript 를 사용하면, 이러한 불편.. 2022. 8. 2.
1. Sass 출처 - 벨로퍼트 https://react.vlpt.us/styling/01-sass.html SASS 참조 defaultProps 를 통하여 size 의 기본값을 medium 으로 설정하고, 이 값을 button 태그의 className 으로 설정하고자한다. className에 CSS 클래스 이름을 동적으로 넣어주고 싶을 때 다음과 같이 설정한다. (size가 변수) className={['Button', size].join(' ')} 또는 className={`Button ${size}`} 하지만, 이 방법보다 classnames 라이브러리를 사용하는 것이 훨씬 편함 ⇒ 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합할 수 있음 yarn add clas.. 2022. 7. 30.
22. Context API를 사용한 전역 값 관리 출처 - 벨로퍼트 : https://react.vlpt.us/basic/22-context-dispatch.html Context API와 dispatch를 사용하면 3~4개 이상의 컴포넌트를 거쳐서 전달해야하는 복잡한 구조를 해결할 수 있다. const UserDispatch = React.createContext(null); createContext 의 파라미터에는 Context의 기본값을 설정할 수 있다. : Context를 쓸 때 따로 지정하지 않을 경우 사용되는 기본값 Context를 만들면, Context 안에 Provider라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context의 값을 정할 수 있다. 이 컴포넌트를 사용할 때 value 라는 값을 설정해주면 된다. ... 이렇게 설정해.. 2022. 7. 29.
20. useReducer를 사용하여 상태 업데이트 로직 분리하기 출처 - 벨로퍼트 : https://react.vlpt.us/basic/20-useReducer.html 공부를 다시 해야할 거 같음 ! reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만드는 로직 switch (action.type) { case 'INCREMENT' : return state + 1; case 'DECREMENT' : return state - 1; default : return state; } } state : 현재 상태 action : 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용 const [state, dispatch] .. 2022. 7. 28.
19. React.memo를 사용한 컴포넌트 리렌더링 방지 출처 - 벨로퍼트 https://react.vlpt.us/basic/19-React.memo.html React.memo : 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화 export default React.memo(UserList); 작성한 코드 기준으로 이야기해보자. 하지만, export한 컴포넌트를 React.memo로 감싸도 user의 이름을 클릭하면 user컴포넌트가 모두 리렌더링된다. 그 이유는 다음 코드에서 useCallback 함수에 users 가 디펜던시에 있기 때문에 users 값이 변경되었다 판단하여 렌더링을 하게된다. const onRemove = useCallback( id => { // user.id 가 파라미터로 일치하지 않는 .. 2022. 7. 26.
18. useCallback을 사용하여 함수 재사용하기 useCallback vs. useMemo useCallback : 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 useMemo : 특정 결과값을 재사용할 때 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ) ❗ 함수안에서 사용하는 상태 혹은 props가 있다면 꼭, deps 배열 안에 포함시켜야 된다. 만약, deps 배열 안에 함수에서 사용하는 값을 넣지 않게된다면, 함수 내에서 해당 값들을 참조할 때 가장 최신값을 참조할 것이라 보장할 수 없다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야한다. 2022. 7. 23.
17. useMemo를 사용하여 연산한 값 재사용하기 useMemo Hook을 사용하여 연산된 값을 재사용 1) 첫번째 파라미터 : 어떻게 연산할 지 정의하는 함수 2) 두번째 파라미터 : deps 배열 이 배열 안의 내용이 바뀌면, 첫번째 파라미터에 등록한 함수를 호출해서 값을 연산해주고 만약에 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. const count = useMemo(() => countActiveUsers(users), [users]); 2022. 7. 22.
16. useEffect를 사용하여 마운트/언마운트/업데이트 시 할 작업 설정하기 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 언마운트됐을 때 (사라질 때) 업데이트 될 때 (특정 props가 바뀔 때) useEffect(() => { // 마운트 시 하는 작업을 작성 console.log('컴포넌트가 화면에 나타남'); return () => { // 언마운트 시 하는 작업을 작성 (업데이트 되기 바로 직전에 호출) console.log('컴포넌트가 화면에서 사라짐'); } }, []); useEffect 1) 첫번째 파라미터 : 함수 2) 두번째 파라미터 : 의존값이 들어있는 배열 (deps) - 만약 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출 마운트 시 하는 작업에 바뀌기전값이 .. 2022. 7. 21.
13. 배열에 항목 추가하기 with 복습 출처 - 벨로퍼트 https://react.vlpt.us/basic/13-array-insert.html 이제까지 공부한 것을 복습하며 다시금 코드를 읽어보자. CreateUser.js import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; props를 통해 컴포넌트에 값 전달 (5. props 를 통해 컴포넌트에게 값 전달하기) UserList.js import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); }.. 2022. 7. 4.
12. useRef로 컴포넌트 안의 변수 만들기 출처 - 벨로퍼트 링크 useRef Hook의 용도 1) DOM 선택 2) 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리 e.g. 고유 id 관리하는 용도 관리가능한 값 1) setTimeout, setInterval 을 통해서 만들어진 id 2) 외부 라이브러리를 사용하여 생성된 인스턴스 3) scroll 위치 useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다. .current 로 수정, 조회를 하면된다. 예시) const nextId = useRef(4) 2022. 7. 2.
11. 배열 렌더링하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/11-render-array.html 리액트에서 배열을 렌더링 할 때에는 key 라는 props를 설정해야한다. key 값은 각 원소들마다 가지고 있는 고유의 값으로 설정을 해야하는데 아래의 경우에는 id 이다. UserList.js import React from 'react'; // {user} : props를 통해 컴포넌트에 값 전달 function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.. 2022. 7. 1.
10. useRef로 특정 DOM 선택하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/10-useRef.html useRef : JavaScript의 getElementById , querySelector 같은 DOM Selector함수를 사용해서 DOM을 선택하는 것과 같은 의미 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정 그러면 Ref객체의 .current 값은 우리가 원하는 DOM을 가리킴 focus() : DOM 객체에 focus하는 함수 import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name:.. 2022. 6. 25.
반응형

티스토리툴바