728x90 {React}48 11.01.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-2 챕터리뷰 [ 새롭게 알게된 것 ] 1. useEffect대신 useReducer로 구현했을 때의 장점은 2가지임 첫째. useState의 setState 함수를 여러번 사용하지 않아도 된다는 점 둘째. 리듀서로 로직을 분리했기 때문에 다른 컴포넌트에서 재사용이 쉽다는 점 2022. 11. 1. 10.30.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-1 챕터리뷰 [ 새롭게 알게된 것 ] 1. useEffect 첫번째 파라미터에는 async 함수를 사용할 수 없음을 알게됨 대신 함수 내부에서 async를 사용하는 새로운 함수를 선언해주어야 함 useEffect(() => { const fetchUsers = async () => { ... }; }, []); 2. 로딩상태관리 로직을 알게됨 초깃값은 false로 설정해줌 useEffect를 사용해 컴포넌트가 마운트 되는 시점을에 로딩상태를 true로 변경해서 '로딩중'이라는 문구를 보여주고 마운트 완료된 시점엔 다시 false로 초기화 해줌. 3. 버튼을 눌려서 API 재요청 기능구현할땐 fetchUsers 함수를 바깥으로 꺼내 버튼과 연결해야됨 앞서 1번 내용중 useEffect 첫번째 파라미터에 async 함수.. 2022. 10. 30. 10.29.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-3챕터리뷰 [ 새롭게 알게된 것 ] 1. Date 함수를 활용해 오늘날짜와 요일을 표기할 수 있음 사용법은 new Date(); 로 호출해주면됨. 연도, 달, 일자를 변수에 담고 싶을땐 아래와 같이 toLocaleDateString()을 이용해주면 됨. const today = new Date(); const dateString = today.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' }); const dayName = today.toLocaleDateString('ko-KR', { weekday: 'long' }); 2. 토글 및 삭제기능은 todoList가 아닌 todoItem에서 핸들링 해야됨을 알게됨 그래서 tod.. 2022. 10. 29. 10.29.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-2챕터리뷰 [ 새롭게 알게 된 것 ] 1. 함수를 다른 컴포넌트에서 사용할때와 컴포넌트를 다른 컴포넌트에서 사용할때의 호출차이를 알게됨 함수를 다른 컴포넌트에서 호출할때는 아래와 같이 { } 중괄호 안에서 호출해줘야됨. 2. context 훅을 만들때 에러 처리하는 법을 알게됨 용도는 커스텀 Hook을 사용시 커스텀 Hook이 선언된 컴포넌트 내부에 반드시 렌더링 되어야 하는데 해당 태그로 감싸져 있지 않은 경우 에러를 발생해서 실수를 예방할 수 있음 export function useTodoNextId() { const context = useContext(TodoNextIdContext); if (!context) { throw new Error('Cannot find TodoProvider'); } retur.. 2022. 10. 29. 10.27.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-1챕터리뷰(2) [ 새롭게 알게된 것 ] 1. react-icons 라이브러리를 알게됨 설치방법은 아래와 같음 npm install react-icons --save 사용법은 해당 아이콘 디자인 변수명 그대로 호출해주면 됨 2. 일반 HTML 태그 외에도 커스텀 컴포넌트 태그를 Component Selector 기능을 사용해 넣을 수 있음 정말 놀라움. 아래 예시처럼 특정 커서가 해당 컴포넌트에 있을때 특정 컴포넌트 css를 조작할 수 있음. /* 컴포넌트 A */ const Remove = styled.div` display: flex; &:hover { color: #ff6b6b; } display: none; `; /* 컴포넌트 B */ const TodoItemBlock = styled.div` display: .. 2022. 10. 27. 10.26.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-1챕터리뷰(1) [ 새롭게 알게 된 것 ] 1. styled-components에서 글로벌 스타일 추가하고 싶을때 createGlobalStyle 함수를 사용한다 사용법은 아래와 같이 간단하다 import React from 'react'; import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { background: #e9ecef; } `; 위 코드는 body태그에 회색 배경색상을 CSS 적용해주는 함수임 2. body태그안에 투두 템플릿 렌더링할땐 body안에 넣는게 아니라 병렬 태그 사용해야됨 처음엔 GlobalStyle을 컴포넌트로 착각해서 GlobalStyle안에 투두 템플릿을 집어넣으려고.. 2022. 10. 26. 10.24.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(4) [ 새롭게 알게된 것 ] 1. styled-component에서 태그안에 또 다른 태그가 들어간게 보인다면 놀라지말자 Nested CSS임 h3, div, p 태그 같은 태그들은 styled-componet에선 굳이 아래처럼 따로 컴포넌트를 만들지 않아도 const Title = styled.h3``; Nested CSS 문법으로 styled.div ` ..(이하 생략) 안에 사용가능해요 마당~ (예전에 remon 한테 물어보셨던 내용이 이거랑 관련된거 같아서 코멘트 적어욥) 아래처럼 특정 스타일 적용 가능함 const DialogBlock = styled.div` h3 {} p {} `; 2. 만약 컴포넌트를 잘 만들었는데 경로 에러 표시가 뜬다면, 해당 컴포넌트가 호출위치를 재 확인할것 3. 컴포넌트.. 2022. 10. 25. 10.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(3) [ 새롭게 알게 된 것 ] 1. Button에 color props를 넣어주었다면 해당 컴포넌트 CSS도 props로 color변경해줘야됨 color도 넣어주고 app.js theme도 설정 다 했는데 여전히 바뀌지 않는다면? 버튼 색깔에 당황하지 말고 기존에 고정되어 있던 블루 배경색을 /* 색상 */ background: #228be6; &:hover { background: ${lighten(0.1, '#228be6')}; } &:active { background: ${darken(0.1, '#228be6')}; } 아래처럼 props를 변수로 받아 활용해주면 간단히 해결됨을 확인했음 /* 색상 */ ${props => { const selected = props.theme.palette[prop.. 2022. 10. 24. 10.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(2) [ 새롭게 알게된 것 ] 1. styled-component는 스타일과 컴포넌트를 동시에 만들기 가능함 div를 스타일링하고 싶으면 styled.div 아래와 같이 만들기 가능 import React from 'react'; import styled from 'styled-components'; const Subject = styled.div` width: 5rem; ...생략 `; 2. 특정 props값을 기반으로 여러 CSS를 조건부로 보여주고 싶다면 직접 CSS 사용해야됨을 알게됨 const Circle = styled.div` background: ${props => props.color || 'black'}; ${props => props.huge && ` width: 10rem; height:.. 2022. 10. 23. 10.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(1) [ 새롭게 알게된 것 ] 1. styled-componets는 js안에 css를 작성가능케한 현존 가장 인기있는 라이브러리임 이와 비슷하게 emotion과 styled-jsx가 있음 2. Template literals은 이전 ES5 'template strings'에서 이름만 바뀐거임 `string text ${expression} string text` 요렇게 문자열안에 변수넣을때 자주 썼던 문법임 이때 변수안에 문자열이나 숫자가 아닌 객체나 함수를 넣어줄 수 없음. 근데 이걸 가능케한 문법이 바로 Tagged Template Literal라는 거임. 사용법은 아래 참조 const red = '빨간색'; const blue = '파란색'; function favoriteColors(texts, ..... 2022. 10. 21. 이전 1 2 3 4 5 다음 728x90
