LEO Devlog LEO Devlog

Lifting State Up ✔️ props로는 상위에서 하위 컴포넌트로밖에 전달되지 못하기 때문에 하위 컴포넌트에서 state를 통해 상위 컴포넌트의 내용을 변경할 수 있다. props는 상위 -> 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체로 받는다. Effect Hook ✔️ 리액트에서 순수 함수(only 함수의 입력만이 함수의 결과에 영향을 주는 함수)만 있는 것이 아니기 때문에 side effect가 발생한다. 발생되는 경우는 fetch를 이용해 외부 데이터를 이용하거나, localStorage에서 데이터를 받거나 setTimeOut과 같은 타이머를 사용할 때 등 발생된다. useEffect를 사용하여 side effect를 처리할 수 있는데, 최상위에서만 Hook을 호출하고, React..

Effect Hook Side Effect ✔️ Side Effect(부수 효과)는 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우의 해당 함수를 말한다. 순수 함수(Pure Function)는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다. 이 경우는 Side Effect가 발생되지 않는다. 그렇다면, Side Effect가 발생되는 경우는 언제일까? fetch를 이용해 외부 데이터를 받아오는 경우 LocalStorage에서 데이터를 받아오는 경우 setInterval, setTimeOut을 사용하는 경우 // 타이머 사용 useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다. 최상위에서만 Hook을 호출한다. React 함수 내에서 Ho..

State 끌어올리기 (Lifting State Up) 단방향 데이터 흐름에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 모른다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 단방향 데이터 흐름에 대해서 알아보자 -> 단방향 데이터 흐름을 사용하지 않으면 매번 기능 변경 사항에 대해서 코드를 계속 작성해야 된다. -> 코드의 흐름을 알기 쉽다. 복잡하지 않게 된다. -> 컴포넌트의 중요한 상태만 잘 관리하면 아래에서 UI가 자동으로 변경된다. props는 상위에서 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체..

React State & Props Props 컴포넌트의 특성 (property)를 의미한다. 객체 형태로 존재한다. 변하지 않는 외부로부터 전달받은 값 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 함부로 변경될 수 없는 읽기 전용(read-only)객체이다. State 애플리케이션의 "상태" 컴포넌트 내에서 변경될 수 있는 값 State Hook, useState useState를 React에서 불러오는 방법 import { useState } from "react"; useState를 호출하면 배열이 반환된다 ! const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 반환된 배열의 0번째 요소는 state 저장 변수, 1번째 요소는 state 갱신 함수이..

React 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. React의 3가지 특징 선언형 기존처럼 HTML/CSS/JS로 나눠 적는 것이 아닌, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 컴포넌트 기반 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다 유지보수에 용이 범용성 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용된다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다. JSX란..? JavaScript를 확장한 문법 JSX는 H..