yoncho`s blog

목차 : 1. React Component Life Cycle ? 2. useEffect (*mount/ update/ unmount) 1. React Component Life Cycle? React Component Life Cycle은 3단계를 거친다. 생성되어 화면에 표시되는 Mount, 상태 변화로 화면에 표시되는 값이 업데이트되는 Update, 화면에서 제거되는 Unmount이다. 간단한 예시로 Mount에서는 초기화 작업을, Update 에서는 예외 처리 작업을, Unmount에서는 메모리 정리 작업을 수행한다고 보면 이해가 빠를 것이다. Class Component 에서는 위 그림 처럼 각 단계별로 React에서 제공하는 method가 존재한다. 근데 왜 useEffect를 배우냐? use..

목차 :1. useRef 1. useRef?useRef는 React Hook 중 하나로 Functional Component에서 DOM 요소나 다른 값에 접근하기 위해 사용한다.즉, JS 진영에서 HTML 요소에 접근할 수 있게 해주는 것이다.예를 들면 useRef를 이용해 input 요소에 사용자가 입력한 값이 정상적이지 않을 경우 포커스 시켜 다시 입력을 요구하게 할 수 있는 것이다. 사용 예시는 아래와 같다.import React, { useRef } from 'react';function FocusInput() { const inputRef = useRef(null); const handleFocus = () => { inputRef.current.focus(); }; return (..

목차 : 1. input 처리2. state 변수가 많을 경우 1. input 처리 보통 HTML에서 사용자의 input을 처리하는 요소는 , .. .. 등이 존재한다.input 처리 요소에서 사용자가 값을 입력하면 event가 발생하는데 이걸  onChange 속성으로 처리할 수 있다. React의 State를 이용한 input 처리 예제 코드를 보자.import React, { useState } from 'react';function InputForm() { const [inputValue, setInputValue] = useState(''); // 초기값은 빈 문자열 // 입력 필드의 내용이 변경될 때 호출되는 핸들러 const handleInputChange = (e) => { ..

목차 : 1. props? 1. props? React를 구성하는 Component에서 상위 부모로 부터 값을 받아오거나, 하위 자식에게 값을 전달해줄 때 사용되는 강력하고 효율적이며 기본적인 속성이다. props는 변수, state 등이 전달 될 수 있다. [ParentComponent.js] import React from 'react'; import ChildComponent from './ChildComponent.js'; function ParentComponent() { return ( ); } [ChildComponent.js] function ChildComponent(props) { return ( Hello, {props.name}! ); } 위 예제 코드를 확인해보면 ParentCom..

목차 : 1. State? 1. State? State는 상태를 의미하며, 상태는 계속 변화하는 값이다. React에서 Hook이라 부르는 State는 동적으로 변하는 값이고 값에 따라 수행이 달라진다. Component안에 사용하는 State는 Component가 직접 관리하며 기본적으로 아래 코드 처럼 사용된다. import React, { useState } from 'react'; function Counter() { // 상태 변수 count와 해당 변수를 업데이트하는 함수 setCount를 정의합니다. // useState 함수는 초기 상태값을 인자로 받고 해당 상태 변수와 업데이트 함수를 반환합니다. const [count, setCount] = useState(0); // 상태 변수 cou..

목차 : 1. JSX? 2. 문법 1. JSX? JSX는 JavaScript eXtension으로 JS 확장을 의미한다. 기존 JS에서 HTML 문법을 작성할 수 있다. React에서 Component를 만들 때 유용하게 쓰인다. React App을 만들 때 필요한 babel이 JSX를 JS로 변환해주는 역할 수행하므로 JS 기반인 React에서 구동이 되며 파일 확장자는 .jsx 지만 .js 확장자로 파일을 생성해도 무관하다. 2. 문법 JSX에서 HTML의 모든 Tag들은 닫아줘야한다. HTML에서 ,

목차 : 1. Create React App ? 2. CRA 파일 분석 1. Create React App ? React는 Component 기반의 UI 라이브러리이다. React로 Web을 만든 것을 React App이라 한다. React App을 만들 때 같이 사용하는 중요 라이브러리가 존재한다. *Webpack (Component Module/ Css 등의 다수 파일을 하나의 파일로 관리할 수 있게 해주는 모듈 번들 라이브러리) *babel (JSX를 JS 문법으로 사용하게 해주는 라이브러리) 위 두개 라이브러리이다. React App을 직접 구현할 때는 개발자가 직접 두 라이브러리를 포함한 여러 설정들을 해줘야한다. 여기서 Create React App을 사용하면 손쉽게 두 라이브러리를 포함한 R..

목차 : 1. React 란? 2. 선언형 프로그래밍 (vs 명령형 프로그래밍) 2. React Virtual DOM 1. React 란? " Component 기반 UI 라이브러리 " React는 UI의 구성들을 하나하나 컴포넌트화 시켜서 별도로 분리할 수 있게 도와주는 역할을 하며, 이는 동일한 코드에 대한 반복성을 줄일 수 잇다. 2. 선언형 프로그래밍 (React) : 목적을 바로 실행하려는 프로그래밍/ vs 명령형 프로그래밍 (jQuery) : : 절차를 하나하나 (어떤 id의 컴포넌트에서 어떤 속성을....) 나열하는 프로그래밍/ 3. Virtual DOM *DOM : Document Object Model 로 HTML의 구조를 Tree로 나열한 것이라 생각하면 된다. 기존 방식으로는 HTML..