JudithHopps JudithHopps

컴포넌트 제작 TodoInsert import React, { useCallback,useState } from 'react'; import { MdAddComment } from "react-icons/md"; import './TodoInsert.scss' const TodoInsert = ({onInsert}) => { return ( ); }; export default TodoInsert; TodoInsert.scss .TodoInsert{ display: flex; background-color: #495057; input{ background :none; outline: none; border: none; padding: 0.5rem; font-size: 1.125rem; line-heigh..

1. 프로젝트 준비 프로젝트 생성 및 라이브러리 설치 //프로젝트 생성 npm create react-app Todo //라이브러리 npm install node-sass npm install classnames npm install ract-icons Prettier 설정 루트 디렉터리 .prettierrc 파일 생성 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } index.css 수정 body { margin: 0; padding: 0; background-color:azure; } App.js 컴포넌트 초기화 import React from 'r..

useState 함수형 컴포넌트 const [value, setValue] = useState(''); const [name,setName] = useState(''); return ( setValue(value+1) } {value} setName(e.target.value)) /> {name} ) useEffect 렌더링 될때마다 특정 작업 수행 useEffect(()=> { console.log() }, [] : 마운트 [name] : 특정 값 업데이트 } useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다른 값으로 업데이트 function reducer(state,action) { return { ...state, [action.name] : action.value } } ..

이벤트 핸들링 const onChange = e => { const next = { ...form, [e.target.name] : e.target.value} setForm(nextForm); } ref : Dom에 이름 짓기 1. 사용 이유 - Dom을 직접 건드려야 할 때 ex 1. 특정 input에 포커스 ex 2. 스크롤 박스 조작 ex 3. canvas 요소 그림 그리기 2. 사용 방법 a. 콜백 함수 {this.input=ref}} /> b. createRef input = React.createRef(); 컴포넌트 반복 (= 반복 데이터 렌더링) 배열의 map 이용 const name = ['a', 'b', 'c', 'd', 'e'] const nameList = name.map((name..

컴포넌트 리액트로 만들어진 앱을 이루는 최소한의 단위 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 예시 ) App.js import TodoTemplate from "./TodoTemplate"; 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 const Welcome = ({props}) => { return Hello, {props.name}; }) 클래스형 컴포넌트와 함수형 컴포넌트 차이 클래스형 컴포넌트 함수형 컴포넌트 render 함수 필요하고 JSX 반환 return문으로 실행 후 사라..

Vs code 설정 1. ESlint : 문법확인 2. Prettier : 가독성 3. 자동저장 (설정 -> autosave) 4. ReactJS CodeSnippet : 코드 스니펫 rsc + enter (또는 tab) 5. VS-Code-Styled-Componenets : 색상 6. indent-rainbow : 블록 색상으로 표시 자동 저장 File -> Auto Save Fragment = return ( hello ) App.js import React from 'react'; const App = () => { const name = "Judith-hopps" return ( {name} ); }; export default App; 조건문 1. 삼항 연산식 { 조건식 ? () : () } ..

스택과 큐의 차이와 예시 스택은 스택은 시간 순서에 따라 자료가 쌓여서 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는 구조적 특징을 가지게 된다. 이러한 스택의 구조를 후입선출(LIFO, Last-In-First-Out) 구조이라고 한다. 그리고 비어있는 스택에서 원소를 추출하려고 할 때 stack underflow라고 하며, 스택이 넘치는 경우 stack overflow라고 한다. 예시는 웹 방문기록을 들 수 있다. 큐는 선입선출(FIFO, First in first out) 방식의 자료구조를 말한다. 가장 먼저 삽입된 원소가 가장 빠르게 나간다. 캐시구현을 예시로 들 수 있다. 힙 - 최대값 혹은 최소값을 빠르게 찾기 위한 이진트리입니다. - 최소힙의 경우 부모는 자식보다 작고 최대 힙의 경우는 ..

💡 box model의 전체 크기 : 콘텐츠 크기 + padding 값 + border 값 + margin 값 React, Vue, Angular의 차이는 무엇인가요? - 일단 3개의 공통점은 SPA기반 프론트엔드 프레임워크/라이브러리인것이다. 리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능하다는 차이가 있습니다. 러닝커브는 뷰가 가장 낮고, 리액트는 jsx 문법을 사용하며, 개발 생태계가 가장 잘 활성화 되어있다. 큰 규모의 어플리케이션 개발에 유리하다. 뷰와 앵귤러는 프레임워크이다. 앵귤러는 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋지만 러닝커브가 크다. 리액트와 뷰의 차이 1 react는 UI 라이브..