본문 바로가기

전체 글

(112)

React / openweatherapi 사용하기 어제는 openweathermap API로 현재 내 위치의 5일간의 날씨를 받아오고,styled-components를 사용해 스타일을 적용하는 과제를 수행했는데 연동하는데 시간을 많이 썼어서 이번 기회에 정리해두고자 한다 (예전에 바닐라 자바스크립트로는 받아왔는데도... )일단 사용해서 작성한 코드를 App.jsx에 한번에 적어놨다 App.jsx더보기import { useState, useEffect } from 'react';import { styled, createGlobalStyle } from 'styled-components';// styled-components ------------------const Container = styled.div` width: 100vw; height: 1..

React / Todo-List 만들기 (2) 1탄 : https://hydeveloper.tistory.com/191 이번에는 useState, useEffect, useRef와 json.server를 활용해 CRUD 기능을 가진 todoList를 만들어야하는데일단 해당 과제는 깃허브에 업로드해놨다.. https://github.com/idubusomuch/Todo-app-json 최소 요구 사항Todo 생성 / 조회 / 수정 / 삭제 (CRUD) 기능을 구현하세요.현재 시간 표시, 타이머, 스톱워치 중 하나 이상의 기능을 구현하세요.랜덤 명언을 표시할 수 있는 컴포넌트를 만드세요.useState, useEffect, useRef를 각각 한 번 이상 사용하세요.자유롭게 적용해보고 싶은 CSS를 작성해보세요.심화 요구 사항json-server를 사..

React / 스타일링 (3) - tailwindcss Tailwind CSS가장 대표적인 Utility-First CSS 프레임워크로, 이미 작성된 CSS코드가 클래스로 지정되어 있어 이를 조합하여 사용하는 방식이다. *Utility-First CSS : 미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것을 뜻 한다.*유틸리티 클래스 : 공통적으로 사용되는 속성을 모아서 클래스로 만든 것이다. 중복된 코드를 방지할 수 있고 효율적으로 사용할 수 있다. Tailwind CSS의 장단점장점CSS 코드를 직접 작성하지 않아도 됨 => 개발속도가 빨라짐체계적이고 일관된 디자인 사용 가능단점초기 설정이 복잡함코드의 가독성이 안좋아짐 (특히 애니메이션 등을 적용 할 때는 정말 코드가 복잡해지고 더러워질 수 있다)css의 크기가 커질 수..

React / 스타일링 (2) - Styled Components CDD (Component Driven Development) : 화면을 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발하는 방법론 리액트는 CDD를 할 수 있게 도와주는 라이브러리다. 그래서 js 안에 html을 넣어 컴포넌트를 작성하는 방식으로 개발할 수 있었는데, Styled Components는 css도 포함해서 리액트 컴포넌트로 구성해 개발할 수 있게 도와준다. Styled ComponentsCSS-in-JS 방식(css 내용도 javascript 안에서 작성할 수 있도록 함)의 라이브러리로, 스타일을 리액트 컴포넌트로 만들어서 사용한다. Styled Components의 장단점장점CSS도 컴포넌트화 할 수 있음CSS와 JS의 상호작용이 쉬움 (아무래도 같은 파일에서 작성하기 때문에)Cla..

React / 스타일링 (1) - SCSS SASS(Syntactically Awesome Style Sheets) 기존 CSS의 단점을 보완하고 효율성을 높이기 위해 만들어진 문법CSS 코드 중첩, 변수화, 속성 재사용 등 여러 기능 제공 SCSS(Sassy CSS) SASS 3버전에서 등장한 SASS의 신버전으로 호환성, 가독성이 좋아짐 (기존과 달리 중괄호 사용) 사용 준비설치npm install sass scss 확장자로 변경App.scssindex.scss + App.jsx와 main.jsx에서 Import하는 css파일도 바꿔주기!// app.jsximport './App.scss'// main.jsximport './index.scss' 문법1. 변수사용방법/* 선언 */$변수명 : 값;/* 사용 */선택자 { 속성 : $..

React / custom Hook Custom Hook사용자가 직접 정의해서 사용하는 Hook으로 use로 시작하는 이름을 지어주면 된다.중복 되는 부분을 훅으로 만들어서 재사용성, 유지 보수성 및 코드 가독성을 높일 수 있다는 장점이 있다. 예시 - Counter +, - 버튼으로 숫자를 증가 감소 시키는 다음과 같은 코드가 있다고 할 때, 커스텀 훅을 사용하지 않은 경우 (컴포넌트 생성)UI와 상태가 결합돼 재사용이 어려움 (App 컴포넌트의 return문에서 여러번 불러오면 여러 개 쓸수는 있다...)만약 똑같은 로직을 다른 컴포넌트에서 쓰려면 복붙해서 사용해야함컴포넌트는 본질적으로는 UI를 구성하는 재사용 가능한 조각이기 때문에 처리 로직, 상태 등이 복잡해지면 컴포넌트가 복잡해짐function App() { return ( ..

React / useRef 제어 컴포넌트 vs useRef useState제어 컴포넌트에서 사용상태가 변화할때마다 리렌더링 발생입력 값의 실시간 상태 반영이 필요하거나 다른 컴포넌트에 영향을 줄 때 사용폼 검증, 실시간 검색, UI 반응 등에 사용 useRef비제어 컴포넌트에서 사용입력값은 DOM에서 직접 가져옴렌더링과 무관해서, 리렌더링돼도 초기화되지 않는 변수가 필요할 때 사용최종 입력 값만 필요할 때, 성능을 향상시키고 싶을 때는 굳이 사용하지 않아도 됨로그인 창, 비밀번호 입력 등에 사용리액트는 기본적으로 가상 DOM을 통해 실제 DOM을 조작하기 때문에 기본 작동 방식과 다르기 때문에 꼭 필요할 때만 써야함 useRef사용방법1. DOM 주소를 담아줄 공간 생성const domRef = useRef(null) // ..

React / 생명주기 생명주기컴포넌트가 생성되고, 렌더링 된 후 소멸될 때까지의 과정을 의미한다.생명 주기는 Mount(화면에 그려짐) - Update(화면 업데이트) - Unmount(화면에서 사라짐) 세 가지의 단계로 이루어진다. 클래스형 컴포넌트 생명주기 1. 컴포넌트 인스턴스 생성 및 마운트생성된 인스턴스가 DOM에 추가되는데, 컴포넌트가 필요한 설정을 하거나 데이터를 불러오는 등의 초기 작업이 수행된다.constructor() : 컴포넌트 인스턴스 생성 및 state 초기화render() : JSX 리턴, 화면에 그릴 내용 정의componentDidMount() : 컴포넌트가 DOM에 실제로 그려진 후 호출됨, 데이터 요청 / DOM 관련 작업 / 타이머나 이벤트 리스너 등록 등에 사용 2. 업데이트state나 ..

이전 1 2 3 4 5 6 7 8 ··· 14 다음

티스토리툴바