전체 글 (58) 썸네일형 리스트형 React 기초 )) React UI-React styling 방법론 1. React styling 방법론 1) 많이 쓰이는 React + styling 도구 목록 CSS module CSS in JS library : styled components UI framework : Ant Design CSS framwork : W3.css 2) CSS module CSS 단점을 보완한 기술. (하나의 스타일 sheet가 여러 컴포넌트에 영향을 미치는 것을 보완하였다.) 하나의 스타일 시트가 하나의 컴포넌트에만 영향을 미친다. class, id 등에 random string(hash)을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링을 직접 하나하나 해야 한다. import * as React fr.. Todo List 구현하기 (useState) 보호되어 있는 글입니다. React 심화 기능 )) useReducer 1. 상태 변화 코드란? - 상태 변화 코드 : State값을 변경하는 코드 - 상태 변화 코드를 컴포넌트에서 분리한다 : 컴포넌트 내부에 작성했던 상태 변화 코드를 외부에 작성한다는 뜻 - useState를 이용해 State를 만들면 상태 변화 코드를 분리 할 수 없다. 둘 다 컴포넌트 안에서 선언하기 때문이다. - 하나의 컴포넌트 안에 너무 많은 상태 변화 코드가 있는 경우 가독성을 해쳐 유지 보수를 어렵게 만든다. 2. useReducer의 기본 사용법 - useReducer : useState와 더불어 State를 관리하는 리액트 훅(useState의 대체제라고 할 수 있다.) -useState 와 use Reducer의 차이점 useState useReducer State 관리 컴포넌트 내부 컴.. 5.Todo List 앱 리뷰 '한 입 크기로 잘라먹는 리액트' 교재를 보면서 todolist 앱을 만들어 보았다. 추가 버튼을 이용하여 할 일을 추가하고, 할 일 컴포넌트에 있는 삭제버튼을 눌러 할 일 리스트를 하나씩 삭제하는 기능을 만들었다. 또한 검색기능을 통해 내가 추가한 할 일을 검색할 수 있도록 설정하였다. 하지만 코드가 원하는 방향으로 작동하지 않았다. 1. 검색 후 엔터 클릭 시 검색기능이 실행되지 않는다. 2. 할 일을 추가하는 경우 여러개가 아닌 하나의 목록만 추가가 가능하다.(여러 번 등록하면 계속 덮어쓰기가 된다.) 3. 삭제버튼 클릭 시 에러가 발생한다. onDelete is not a function TypeError: onDelete is not a function at onClickDelete (http:.. 4. Todo List 컴포넌트 기능 구현(4) 아이템 리스트 출력 TodoList 컴포넌트 [ TodoItem( )의 파라미터 ] const TodoItem = ({ id, isDone, content, createdDate, onUpdate, onDelete }) => { props를 구조분해 할당한다. [ TodoItem( )의 return문 ] return( {content} {new Date(createdDate).toLocaleDateString()} 삭제 ) 체크박스 input의 체크여부를 isDone으로 설정 할 일을 표시하기 위해 content렌더링 타임스탬프값을 인수로 저장해 Date문자열형식으로 변환 import './TodoItem.css' const TodoItem = ({ id, isDone, content, createdDa.. 리액트 심화 기능 )) 비동기 axios [ axios 사용하기 ] axios.post(요청할 url, 삽입할 데이터 객체) : POST요청을 보내 원하는 값(token) 얻기 case 1 )) 가독성이 좋은 방식 (useEffect ( ) 내부에 쓰기) axios.post(url, data).then( ).catch( ) const URL = 'www.tistory.com' const DATA = { email: test@tistory.com, password: 1234 } useEffect(( )=>{ axios .post(URL, DATA) .then(function (response) { console.log(response); setResult(response.data.token); } ) .catch(function (error){ .. react 기본 기능 )) Hook 비교 [ useEffect, useMemo, useCallback 비교 ] useEffect useMemo useCallback 정의 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하여 상수에 저장하고, 원하는 값이 바뀐 것이 아니라면 이전에 연산했던 결과를 다시 사용하는 방식 이벤트 핸들러 함수를 필요할 때만 생성할 수 있는 Hook 설명 렌더링 되고난 직후에 실행하며,배열의 값이 마운트되거나 업데이트할 때마다 콜백함수가 실행된다. 배열의 값이 업데이트 될 때마다 호출되는 함수의 값을 상수에 저장한다. 어떤 값이 바뀌었을 때 함수를 새로 생성한다. 코드 사용 useEffect( ( )=>{ 실행문; return ( )=>.. 4. Todo List 컴포넌트 기능 구현(3) 할 일 리스트 렌더링 TodoList [ TodoList( )의 파라미터 ] const TodoList = ({ todo, onUpdate, onDelete }) => { (...) } props를 구조분해 할당한다. [TodoList( )에서 return 된 HTML ] return Todo List {getSearchReuslt().map((work) => { })} input의 value 값으로 {search}props를 할당한다. input 입력시마다 onChangeSearch 함수가 실행된다. 검색결과를 배열로 받는 getSearchReuslt()를 새로운 아이템으로 재배열 한다. todo의 모든 요소를 순차적으로 순회하며 HTML로 변환. work의 모든 프로퍼티를 스프레드 연산자를 이용해 p.. 이전 1 2 3 4 5 6 7 8 다음
