Developer

React 리액트 - useEffect() (함수형 컴포넌트)

참조 투명성 참조 투명성 - 입력받은 값을 그대로 출력하는 함수를 참조 투명하다고 하며, 순수 함수(Pure Function)라고 한다- 입력받았을 때 다른 값으로 출력하거나 외부 함수에 영향을 끼치는 함수를 참조 불투명하다고 한다-> 순수함수가 아닌 함수에서 Side-Effect가 발생한다 - 리액트는 모든 함수를 순수 함수로 유지할 것을 권장하고 있음-> 컴포넌트의 재사용성이 좋아지고 오류 검사 및 테스트도 좋아진다 Side-Effect : 함수 내 특정 동작이 함수 외부에 영향을 끼쳐 프로그램의 동작을 이해하기 어렵게 만드는 행위a) setTimeOut, setIntervalb) 서버와의 통신(fetct, axios)c) 그 외 비동기 함수 useEffect() - Side-Effect를 따로..

React 리액트 - 리액트 라이프사이클 (클래스형 컴포넌트)

리액트 라이프사이클 리액트 라이프사이클 - 페이지에 컴포넌트가 생성되고, 수정되고, 사라지는 순서를 의미- React에서 클래스 컴포넌트를 사용하면, 9개의 메소드를 통해 작업 흐름을 제어할 수 있다 리액트의 라이프사이클은클래스형 컴포넌트로 찢겨져 있는 메소드들을 찾아 사용하는 과정이다-> 그 중 하나가 useState() 마운트- constructor : 새로운 컴포넌트를 생성할 때 마다 실행- getDerivedStateFromProps : props를 state에 넣을 때 사용-> 컴포넌트가 마운트될 때와 업데이트가 될 때 실행된다- render : 준비해놓은 UI를 랜더링할 때 실행된다- componentDidMount : 페이지에 컴포넌트가 나타난 직후 실행된다 업데이트 - getDeri..

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 기초 용어 랜더링(Rendering) - 화면에 보여주는 것 - 코드가 번역(컴파일)되어 실행된 뒤 화면을 통해 사용자에게 보여진다. 초기 랜더링(Mount) - 가장 처음으로 랜더링 되..