Developer

useRef() VS useState() useState(): 화면을 업데이트해야하는 '상태'를 저장하는 용도-> 상태가 바뀌면 화면이 다시 렌더링된다 VS useRef(): 리렌더링 없이 값을 저장하거나 DOM에 접근하는 용도-> 값이 바뀌어도 화면이 렌더링되지 않는다 - 값이 바뀌어도 화면을 바꾸고 싶지 않을 때 사용- useState()를 남발하면 불필요한 렌더가 계속 일어나기 때문에 성능이 저하된다-> useRef()가 훨씬 효율적이 될 수 있다 - checkBox처럼 화면과 무관한 값을 저장할 때 useRef()를 사용하기 좋다 Check 유효성 검사 사용자로부터 ID와 PW를 입력받아 전송유효성 검사를 통해 ID와 PW과 입력받지 않은 경우 경고창을 띄운다 import React fro..

useReference useRef란?: 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook- Ref는 reference, 즉 참조를 뜻한다- ref == DOM리액트는 돔을 지양하기 때문에 돔을 사용하는 것을 권장하지 않는다때문에 돔과 동일하게 쓸 수 있는 reference가 있다 Name - useState 사용 사용자가 입력창에 이름을 입력하고 버튼을 누르면'님' 존칭이 붙도록 함 import React, { useState } from 'react';const Name = () => { const [inputValue, setInputValue] = useState(""); const [name, setName] = useState(""); const [isSubmi..

FoodContainer 컨테이너를 사용해 성능을 높이기 위함 import React from 'react';import Food from './Food';const FoodContainer = () => { const foods = [ // 배열: 객체들이 순서대로 모여 있는 자료 구조 // 객체: 순서가 없는 자료 구조 { id : 1, name : "리코타치즈샐러드" }, { id : 2, name : "떡볶이" }, { id : 3, name : "신김치생삼겹살" }, { id : 4, name : "모쯔나베" }, { id : 5, name : "감자뇨끼" } ] // 1. 위에 있는 값을 받아서 처리 -> ..

State 리액트에서는 상태를 바꾸어 주어야 한다 V.D > State > View 리액트에서는 위와 같은 흐름으로 동작하기 때문에V.D에서 View에 반영되는 부분을 바꾸고 싶다면State(상태)를 바꾸어야 한다 setCount : 숫자가 하나씩 늘어나거나 줄어들게 동작하는 버튼 만들기 기존에 아래와 같이 JS에서 사용하던 방식은 사용이 어려움1. selector -> DOM API2. addEventListener3. +=, -= 리액트에서는 기존에 사용하던 dom은 eventListner를 사용할 수 없다 따라서 핸들러를 사용한다이런 코드가 수천 개 있어도 실제 DOM에는 클릭 이벤트가 딱 한 번만 등록됨 (delegation 방식).- 리액트가 이벤트 바인딩을 최적화해줌- 리액트는 내부적으로..

Props Props: properties(속성)의 줄임말 - 컨테이너가 변수들의 값을 넘겨 주는 것으로 읽기 전용 데이터- 부모 → 자식 방향으로만 전달됨- 자식은 props를 수정할 수 없음 (immutable)- 컴포넌트에게 “설정값” 또는 “입력값”을 주는 역할 import React from 'react';import PropsComp1 from './PropsComp1';import PropsComp2 from './PropsComp2';import PropsComp3 from './PropsComp3';const PropsContainer = () => { const name = "아엘" const age = 23 return ( ..

jsx에서의 변수 표현 const Jsx03 = () => { const name = "아엘" const age = "23" const gender = "여" const intro = `이름: ${name} | 나이: ${age} | 성별: ${gender}` return ( {intro} )}export default Jsx03; jsx에서 쓰는 표현은 키보드의 Esc 아래의 ``(백틱)키를 사용한다 삼항연산자 const Jsx04 = () => { const login = true; return ( 삼항연산자 {login ? ( 로그인 성공! ❤️ ..

React 리액트 기본 함수 jsx를 App.js에서 사용하기 위해기본 함수 const와 =>를 사용하고문서를 내보내기 위해 하단에 export를 사용한다 function 함수를 사용하는 방법도 동일하며하단에 export를 사용하지 않고 함수 앞에 export를 붙여 내보내기 가능 첫번째 방식의 경우 아래의 형태로 가져온다import Jsx01 from './Jsx01';파일명 변경 가능 두번째 방식의 경우 아래의 형태로 가져온다import { Jsx02 } from './Jsx02';파일명 변경 불가하며 반드시 {중괄호}를 사용해야 한다 * function과 const의 차이기본적으로 function과 const의 차이는 없으며둘 다 똑같이 컴포넌트로 잘 동작하며 성능 차이도 없다 c..

React 기본 개념 React란? - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작된 자바스크립트 기반의 라이브러리 - 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용- 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아니라 기존 코드를 없애고 다시 새롭게 랜더링 - React는 html이 아닌 js로 html을 제어한다- SPA방식으로 동적으로 제어하기 때문에 속도가 빠르다- 리액트는 컴포넌트와 컨테이너로 이루어진 사이트를 만드는 것 리액트 라이프사이클 - 페이지에 컴포넌트가 생성되고, 수정되고, 사라지는 순서를 의미- React에서 클래스 컴포넌트를 사용하면, 9개의 메소드를 통해 작업 흐름을 제어할 수 있다 마운트- con..

React란? React 리액트- 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 자바스크립트 기반의 라이브러리- 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용된다- 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아니라, 기존 코드를 없애고 다시 새롭게 랜더링 시스템 환경 설정 Windows PowerShell 설정 Window PowerShell > 관리자로 실행 set-ExecutionPolicy bypass명령어를 입력해 세팅하기 y세팅완료 VS Code에서 react 설치 새 terminal을 생성해 명령어 입력npm i -g yarn명령어를 입력해 상태 확인 yarn -v버전확인 yarn g..

플러그인 마우스 우클릭 > Plugins > Manage plugins... 다양한 플러그인을 다운로드 할 수 있고다운로드한 플러그인은 상단에 저장되어 바로 실행 가능 - fontawesome icons - manage plugins - unsplash - Iconfy, Meterial Design Icons - skew - html.to.design - Blush - Remove BG - Brandfetch - Font Scale 웹페이지, 웹상세 등에서 사용되는다양한 이모티콘 또는 버튼 무료 소스 원하는 아이콘을 키워드로 검색해 찾을 수 있다 처음 가져오는 경우 프레임이 잠겨 있기 때문에사용 시 이미지가 잘릴 수 있으므로그룹을 해제해 벡터 형태로 변환 후 사용해주어야 한다 c..