본문 바로가기

TIL/리액트18

리액트 프로젝트에서 타입스크립트 사용하기 출처 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.
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.
15. 배열 항목 수정하기 onToggle 함수를 선언 active 값에 따라 폰트의 색상 변경하는 것 구현 id값을 비교해서 id가 다르다면 그대로 두고, 같다면 active를 반전시키도록 구현 const onToggle = id => { setUsers( users.map(user => user.id === id ? { ...user, active: !user.active } : user ) ); }; App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022. 7. 19.
14. 배열에 항목 제거하기 filter 내장 함수()를 사용하여 제거할 id값을 가진 객체를 제외한 배열을 새로 만들어준다. (2022.07.05 - [TIL/Javascript] - 배열)를 사용하여 제거할 id값을 가진 객체를 제외한 배열을 새로 만들어준다. onRemove 함수를 선언 : App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022. 7. 19.
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.
반응형

티스토리툴바