본문 바로가기

전체 글250

(React) useReducer 사용법 / useReducer와 이벤트 함께 사용하기 (React) useReducer 사용법 * 이 포스팅은 개인적으로 복습을 위해 정리한 포스팅입니다. useReducer이란? > useReducer은 useState와 마찬가지로 상태를 변경하기 위해 쓰입니다. useReducer 사용 이유 > useReducer은 다양한 상태를 업데이트해줄 수 있습니다. > useState보다 코드를 더 깔끔하게 작성할 수 있습니다. useReducer을 이용한 코드 사용된 이벤트 >onClick : 클릭 시 카운트 변수 값 +1을 해줌 >onClick: 클릭 시 카운트 변수 값 -1을 해줌 >onChange: input태그에 글을 쓸 수 있게 해줌 App.js import React from 'react'; import ReducerComponent from './.. 2021. 8. 24.
(React) 리액트 useEffect 사용법 (React) 리액트 useEffect 사용법 * 이 포스팅은 "리액트를 다루는 기술"책 & 생활코딩님의 강의를 보고 복습겸 정리한 포스팅 입니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하지만, 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없습니다. 그대신 Hook을 사용합니다. 많은 Hook들이 있지만 그 중 useEffect에 대해 정리해 보았습니다. 1) useEffect가 필요한 이유 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을 시 useEffect를 사용할 수 있습니다. 2) useEffect란? 클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것... 2021. 8. 23.
(React) 리액트: 초간단 리스트 작성 기능 구현하기(간단함)/이벤트 핸들링 및 useRef, useState 사용 (React) 리액트: 리스트 작성 프로젝트 만들기(간단함) *이 포스팅은 개인적으로 리액트를 복습하기 위해 작성한 포스팅입니다. 포스팅 요약 1. 기능설명 및 실행 화면 2. 이벤트 핸들링에 대한 간단 설명 3. useRef에 대한 간단 설명 4. useState에 대한 간단 설명 5. 간단한 리스트 작성 기능 구현하기 (css X) 1. 기능설명 및 실행 화면 기능: 1. 입력: input태그에 문자 입력 후, 확인버튼 클릭 or 엔터 시, 입력된 문자 출력 2. 삭제: 삭제를 원하는 요소 더블클릭시 삭제 3. 수정: input태그에 문자 입력 후, 대체하고 싶은 요소 클릭시, 수정됨. 2. 이벤트 핸들링에 대한 간단 설명 리액트에는 HTML과 같은 이벤트들이 있습니다. ex) onClick, onm.. 2021. 8. 22.
(내돈내산/웹) 리액트를 다루는 기술 리뷰/ 리액트 책 추천 (내돈내산/웹) 리액트를 다루는 기술 리뷰/ 리액트 책 추천 제가봤던 모든 교과서(?)중에 구성이 제일 잘되어 있습니다. 앞에는 이해할만 했는데 뒤에 가서는 너무 어려워서 이해가 잘안갔어요 ㅠㅠ 아직 한번 밖에 못봤지만, 작은 프로젝트들 진행하면서 복습해봐야 겠네요!! 리액트를 다루는 기술을 읽기 전에... 1자바스크립트에 대한 이해도가 높아졌을때 보시는거 추천드립니다!! (HTML, CSS는 당연히 알아야 됩니다 !!) 책 전체적인 구성 이론 -> 앞에 설명한 이론을 토대로 실습진행 -> 실습한 내용의 코드 개선 *이론 부분에서 포함된 내용: 1) 기본적인 리액트의 이론과 원리 2) 리덕스, 미들웨어, Koa, 코드 스플리팅, 비동기 로딩, SSR과 같은 대규모 프로젝트를 위한 이론과 원리 좋았던 점... 2021. 8. 21.
(React) 리액트 useState 사용해서 계산기 프로그램 만들기 (React) 리액트 useState 사용해서 계산기 프로그램 만들기 * 아직 코드에 주석 설명을 달지 않았습니다. 계산기 하나 만드는데 이렇게 어려운가.....?! 엄청 간단한줄 알았는데... 몇시간이나 걸렸다 ㅇㄴ.... 계산기를 눌렀을때, 복잡한 사칙 연산 까지 가능한 계산기를 구현 하기 위해 머리를 잔뜩 굴렸다. 분명 더 간단하게 하는 방식이 있겠지만, 리액트 초보자인 나로서는 아래 풀이 방법이 최선이다... ㅠ_ㅠ 혹시 계산기를 만드는 더 좋은 방법이 있다면 꼭 코드 공유해주세요.... ㅠㅠㅠㅠ... 1. 복잡한 사칙연산 가능 2. 일의 자릿수 이상 자릿수의 계산 가능 3. 기호는 먼저 클릭한 것부터 계산. (ex. 13+17*2 => 13+17=30, 30*2=60) 어려웠던 점 예를들면 (1.. 2021. 8. 20.

티스토리툴바