[Study] FE/React 6

[React] 타이머 컴포넌트 만들기

과제형 코딩 테스트 연습 n초부터 1초마다 1씩 감소하는 타이머를 구현해보려고 한다. stop 버튼을 누르면 타이머가 멈추도록 할 것이다. react에서는 useState hook과 useEffect hook을 활용하여 설정할 수 있다. 자바스크림트에서는 setTimeout 과 setInterval 함수로 해결할 수 있다. 그 중 setInterval()를 호출해서 고정된 시간 지연으로 함수를 반복적으로 호출하고 setInterval 이 반환한는 interval ID를 clearInterval() 함수로 제거한다. import { useState, useEffect, useRef } from 'react'; const Time = () => { //컴포넌트는 useState 훅을 사용하여 min, sec..

[Study] FE/React 2023.05.18

React와 Node.js 로 만든 Todo List Mini Project 회고록

🗣️ 프로젝트 소개 Full stack Mini Project ⏰ 개발 기간 2023.04.28 ~ 2023.04.30 ⚙️ 개발 환경 Front-End : React Back-Ent : Node.js Express Server : Mysql ✍ Todo List 기능 - 파비콘 설정 - document.title 변경 - 엔터 입력/ 빈값 입력 x - 반응형 -show / create / edit / delete - 취소선 - 내림차순 정렬 - checkbox 크기 변경 ✍ 코드 기술 Client Public index.html에서 favicon.ico 수정 src components AppTodo.js OnBuutonClick addItem 함수 실행 공백 입력 X input 초기화 onEnterKe..

[Study] FE/React 2023.05.06

[포스코x코딩온] React 04 Map () & filter()

더보기 🙌 자바스크립의 메서드 map, filter, concat 등을 먼저 복습하고 react에서 응용하여 실습 코드를 작성했다. 배운 메서드만 적용하는 것이 아닌, 실습 코드에서 필요한 'Enter 입력' & '공백 입력x' & 'input 값 초기화'까지 추가했다. JavaScript 메서드 복습 map() 함수 메서드는 배열 내의 모든 요소 각각에 대한 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 필요에 따라 반복문처럼 사용 가능 arr.map(callbackFunc, [Arg]) callbackFunc : 새로운 배열의 요소를 생성하는 함수로 3개의 인수(currentValue, index, array)를 가질 수 있다. [Arg]는 생략 가능한 것으로 callbackFunc에서 ..

[Study] FE/React 2023.04.23

[포스코x코딩온] React 03 Event Handling

더보기 이미 나도 모르게 쓰고 있었다. 생각보다 별 거 없으니 쫄지 말 것. Synthetic Event는 이벤트가 너무 많아서 찾아보면서 사용하고, 익혀야 할 것 같다. Event Handling html Event : react event : 괄호x 카멜케이스 함수 이름 자체 전달. 기본 dom 요소에만 이벤트 설정 가능 synthetic Event : 웹브라우저에서 사용하는 기본 이벤트를 감싸는 새로운 기능, =리액트 고유 이벤트 객체 Synthetic Event 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤드 래퍼 SyntheticEvent 객체를 전달 받는다. =리액트 고유 이벤트 객체 import { useState } from 'react'; function Synt..

[Study] FE/React 2023.04.23

[포스코x코딩온] React 02 state & useState

더보기 몇 주차 회고록인지 까먹었다. 리액트는 순수 자바스크립트랑은 비슷하면서도 다른 느낌이다. 그래서 더 기존 자바스크립트 개념이 흔들려서는 안 되겠다고 생각했다. 클래스형 컴포넌트는 잘 사용하지 않지만, 알아두면 좋을 것 같다. 계속 함수형 컴포넌트만 사용하다가 클래스형 컴포넌트를 마주했을 때, 어색하지 않을 정도로만 익혀두자! state React에서 앱의 유동적인 데이터를 다루기 위한 개체 컴포넌트 내에서 지속적으로 변하는 특정 값을 관리하기 위해 사용 state가 변경될 경우 자동으로 재랜더링 state 사용 state의 값을 변경하기 위해서는 반드시 setState 함수를 사용. state 값을 임의로 변경X, setState 함수를 이용해서 값을 변경!! setState 내에 변경할 값 넣기..

[Study] FE/React 2023.04.23

[포스코x코딩온] React 01 특징 및 설치

더보기 front -> back 을 지나서 다시 front로 돌아왔다. 지금부터 가장 많이 사용하고 있는 react에 대해 배웠다. 아직 순수 자바스크립트만으로 코드 짜는 것도 벅차지만, 리액트를 배우면서 하나씩 더 채워나갈 예정이다. React 현재 가장 많이 활용하는 UI 화면을 만들기 위한 자바스크립트 라이브러리이다. 웹의 규모가 커지면, DOM을 직접 건드리게 되면서 코드가 복잡해진다. 리액트는 UI 상태가 변경되었을 때, 처음부터 새로 만들어서 보여주자는 아이디어에서 생겨났다. 속도와 성능의 문제는 가상 Dom인 Virtual Dom으로 빠르게 변경하고 Virtual Dom과 Dom을 비교하여 브라우저 Dom에 패치한다. react는 특정 환경에 렌더링하기 위해 다른 라이브러리와 함께 사용될 뿐..

[Study] FE/React 2023.04.20