본문 바로가기

전체 글127

React - React 기본 사용법 및 데이터 처리하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 의 기본적 사용법을 되돌아 보는 시간을 가져보려고 합니다. 크게 4개의 대 주제로 사용해보도록 하겠습니다. 1. 데이터 입력 및 리스트 처리하기(Array) 1) 데이터 입력하기 먼저 첫번째로 데이터 입력입니다. 일기장형태로 작성을 위해, 간단한 코드를 구현해보겠습니다. 이전 포스팅에서도 언급했듯이, 데이터를 입력하여 상태로 처리하는 것은 "useState"를 사용해 처리합니다. 이를 이제 Input 에서 값을 받아서 useState에 반영해야 합니다. 이를 한가지 구성을 알아보면 아래와 같이 코드를 작성하고, Input 에 값을 입력하면 입력되지 않는 것을 볼 수 있습니다. import { useState } from 'react'; const.. 2023. 8. 10.
React - State & Props 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 가장 중요하게 알아두어야 할 State, Props 에 대해서 알아보도록 하겠습니다. 1. State 알아보기 State, 즉 상태라는 것은 계속해서 변화되는 특정한 상태를 의미합니다. 즉, 현재 우리가 사용하는 모든 Application 은 상태에 따라 동작이 다르고, 그에 따른 결과가 다르게 나타납니다. 예를 들어, 회원가입을 하더라도, 동일하게 하더라도, 내가 입력한 값에 따라 상태가 다르게 출력될 수 있고, 이는 동적으로 결정되기 때문에, 이를 State 라고 합니다. 예를 들어, Application 에서 대표적으로 State 를 사용하는 예시라면, 최근에 자주 설명하는 Dark Mode 를 설정할때도, 상태에 DarkMode Tr.. 2023. 8. 10.
Browser Rendering Step 안녕하세요. Hynn 입니다. 이번 포스팅에서는 브라우저 랜더링의 대한 과정과 단계를 제 기준으로 정리하고, 남겨두는 포스팅입니다. 관련 내용을 보시는분들은 참고하시는 것도 좋을 것 같습니다. 먼저 대략적으로 그림으로 표현한 단계는 아래와 같습니다. 다만 그림의 순서가 항상 맞지는 않습니다. 고정적 부분과, 가변적 부분을 나누어 작성해보겠습니다. 먼저 이를 글로 풀어서 작성하면 다음과 같습니다. 1. 요청 당연히 브라우저 랜더링의 첫번째는 "요청" 입니다. 어느 브라우저든 "요청"을 받아야 랜더링이라는것을 하겠죠? 그렇기때문에 먼저, 어떠한 경로로던지, 브라우저는 "요청"을 해야 합니다. 2. 응답 요청을 했으면, 당연히 응답을 할 겁니다. 응답은, HTML,CSS, JavaScript 와 같은 문서를 .. 2023. 8. 10.
React - 왜 React 가 대세가 되었을까? 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 가 왜 필요하고, 대세가 되었는지 간략하게 정리해보도록 하겠습니다. 시작해보겠습니다. 1) Component React 가 왜 대세가 되었는지를 간략하게 살펴보도록 하겠습니다. 먼저 이를 이해하기 위해서는 HTML 의 몇가지 요소를 살펴보는게 좋습니다. 이를 위해서 간단한 코드를 하나 작성해보도록 하겠습니다. Body Article 기존의 Header, Footer, Nav 와 같은 변하지 않는 Component 를 별도로 모듈화를 하는 것입니다. 이는 이후에 객체지향 프로그래밍(OOP) 에 대한 설명에서 보다 자세히 다루도록 하겠습니다. 이렇게 작성할 경우, 이미 모듈화가 이루어진, MyHeader, Navigation, MyFooter 만 수.. 2023. 8. 9.
React - JavaScript 응용하기 (Promise) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 Promise 객체에 대해서 알아보도록 하겠습니다. Callback 지옥을 해결하기 위해서라고 했지만, JavaScript 에서 가장 많이 쓰이는 객체를 이해하면 보다 비동기를 효율적으로 처리할 수 있습니다. 시작해보도록 하겠습니다. 1. Promise 객체 알아보기 Promise 객체는 기본적으로 상태값을 가지고 있습니다. 이 상태는 3가지로 구분됩니다. 아래의 상태를 살펴보도록 하겠습니다. Pending - 대기 상태 Fulfilled - 성공 Rejected - 실패 Promise 객체는 기본적으로 비동기처리를 수행하면 Pending 이라는 대기중 상태를 갖습니다. 이 상태에서 작업을 수행하고 성공하면 Resolve 라고 하는 Fulfilled, 실.. 2023. 8. 8.
React - JavaScript 응용하기 ( 동기 & 비동기) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 JavaScript 에서 가장 주의깊게 알아야 할 동기, 비동기에 대해서 알아보도록 하겠습니다. 이 동기와 비동기는 JavaScript 가 구동되는 엔진의 원리에도 이해가 필요합니다. 물론 깊은 부분은 별도의 포스팅으로 다룰 예정입니다. 여기서는 실제 사용하는 코드 위주로 알아보도록 하겠습니다. 1. 동기와 비동기 이해하기 먼저 아래의 3개의 task Function 이 있다고 가정해보도록 하겠습니다. const taskA = () => { const obj = { message: 'taskA' }; console.log(obj.message); }; const taskB = () => { setTimeout(() => { const obj = { mess.. 2023. 8. 6.

티스토리툴바