React (23) 썸네일형 리스트형 1. React Styling 방법론 비교 1. CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링을 직접 하나하나 해야한다. 2. UI framework 이미 다 만들어져 있어서 간편하고 쉽게 쓰기 좋다. 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다. 해당 framework의 디자인 철학을 벗어나기 쉽지 않다. 컴포넌트들을 커스터마이징하기가 어렵다. ex) Ant Design, Material UI 3. CSS framework 거대한 CSS 파일 하나를 가져오는 것 개발자가 따로 CSS 파일을 작성하지 않아도 HTML에 클래스만 적어주면 정해진 규칙대로 .. react 프로젝트 - 감정일기장 만들기(2) : 페이지라우팅 설정 참고 : 2023.07.27 - [React/React 심화] - 리액트 심화 기능 )) 페이지 라우팅 리액트 심화 기능 )) 페이지 라우팅 1. 라우팅의 기본 개념들 1) 라우팅 라우팅은 경로를 의미하는 Route와 진행을 의미하는 ing가 합쳐진 단어 : '경로를 지정하는 과정' 라우팅 : 데이터 전달을 목적으로 최적의 경로를 찾아 데이터를 jh-6220.tistory.com 1. 리액트 라우터 설치하기 npm i react-router-dom 성공적으로 설치했다면 package.json - dependencies에서 버전 확인 "react-router-dom" : "^6.4.3" 2. 프로젝트에 라우터 적용하기 import React from 'react'; import ReactDOM from '.. react 프로젝트 - 감정일기장 만들기(1) : 초기설정 1. 새폴더 만들기 2. 터미널에서 npx create-react-app . 명령으로 리액트 앱 만들기 3. src폴더에서 쓰지 않는 4개의 파일 삭제 src/App.test.js src/logo.svg src/reportWebVitals.js etupTest.js 4. App.js와 index의 불필요한 코드 삭제(아래 코드는 불필요한 코드를 삭제 후 초기 상태) import './App.css'; function App() { return ( ); } export default App; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const .. React 기초 )) styled component 기본기(SCSS사용하기) 1. tag example //Button 컴포넌트의 스타일을 지정해주는 코드 const Button = styled.button` font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; background: palevioletred; color: white; ` function App() { return SampleButton } 2. props example const Button = styled.button` font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-ra.. React 기초 )) JavaScript template literal 1.JavaScript template literal Styled Component를 사용하기 위한 JS 기본 문법 Template literals : 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 쉽게 말해 문자열 안에서 JS표현식(expression)을 사용할 수 있게 하는 문법 `string text ${expression} string text` 템플릿 리터럴 결과값 `${string}` string `${number}` number `${boolean}` true / false `${object}` [object object] `${삼항연산자(=ternary operator)}` 참인 값 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 관리 컴포넌트 내부 컴.. 이전 1 2 3 다음
