전체 글 썸네일형 리스트형 [공부하면서 쓰는] 리액트 Virtual Dom 1. 개요 이번 글에서는 리액트에서 사용하는 virtual dom에 대해 다뤄보려고 합니다. 2. 목차virtual dom이란?virtual dom이 동작하는 방식 virtual dom이 성능 최적화하는 이유?react에서 virtual dom이 필요한 이유 virtual dom을 사용하는 리액트 장점글을 마치며 Virtual DOM이란? 정의 : virtual dom은 리액트에서 사용하는 가상의 DOM 트리입니다. 실제 DOM과 달리 메모리 내에서 가볍게 처리되며,변화가 생기면 이를 효율적으로 업데이트 해주는 역할을 합니다. Virtual DOM이 동작하는 방식 virtual dom은 변경이 발생할 때 새로운 virtual dom 트리를 생성하고 이전 상태의 virtual dom과 비교합니다.. 더보기 [공부하면서 쓰는] props와 state 1. 개요 전 글에서 리액트의 기본 개념인 props와 state를 잠깐 설명했었는데, 이 글에서는 props와 state의 각각 개념과 차이점에 대해 자세히 다루도록 하겠습니다. ✅ 목차 - props- state- props와 state의 차이 2. props props란 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하는 방식입니다. import React from "react";function Meeting(props) { return Hello,{props.name} } function App() { return ( );} ✅ 특징 - 읽기 전용으로 사용되며 자식 컴포넌트는 전달받은 props를 수정할 수 없고, 해당 데이터를 사용.. 더보기 [공부하면서 쓰는] useEffect의 개념과 사용법 1.개요 이번 글에서는 useEffect란 무엇인지, 어떻게 사용하는지 단계별로 알아보겠습니다. useEffect는 주로 사이드 이펙트(예: API 호출, DOM 업데이트) 처리를 위해 사용되는 React 훅입니다. 이전 글에서는 useState를 다루었지만, useEffect는 상태 변경 후의 작업을 다루는 훅으로, 리액트 컴포넌트에서 중요한 역할을 담당합니다. ✅React를 사용하다 보면 컴포넌트의 상태나 UI가 업데이트될 때마다 어떤 작업을 실행하거나 정리해야되는 상황이 자주 발생하는데 이 작업을 사이드 이펙트라고 부르며 이를 효과적으로 처리하기 위해 useEffect란 훅이 사용됩니다. * 사이트 이펙트(side Effect)란? 사이드 이펙트는 함수나 메서드의 실행이 프로그램의 상태나 다른.. 더보기 [공부하면서 쓰는 React] useState의 의미와 사용법 useState 의미 : 리액트의 기본적인 hook이며 함수형 컴포넌트에서 가변적인 상태를 가지게 해줍니다. 초기값 설정, 상태 업데이트 함수, 비동기 처리 등의 특징 통해 React 유연성을 극대화하며, 작은상태부터 큰 애플리케이션 상태까지 넓게 사용할 수 있습니다. useState의 기본 형태const [state,setState] = useState(initialstate) state : 현재 상태값을 의미합니다. setState : 상태값을 변경하는 함수 initialState: state의 초기 설정값입니다. 어떤 유형의 값이든 지정할 수 있지만 함수에 대해서는 특별한 동작이 있습니다. (리액트 공식문서) 예를 들면 카운터 상태를 변경해줘야 할 경우엔 다음과 같이 입력합니다. import .. 더보기 [공부하면서 쓰는] React 기본 개념과 생명주기 (life-cycle) 1. 개요 최근에 인텔리픽 면접코칭을 마치면서 리액트의 기본 개념과 생명주기를 물어보셨을 때 대답을 정확히 하지 못한아쉬움이 있었고, 리액트에 대한 기본 개념 공부부터 꾸준히 하라는 피드백을 주셔서 리액트 공부한 내용을 바탕으로 정리를 해보려고 합니다. 공부하면서 쓰는 내용이기 때문에 부족한 내용이 다소 보일 수 있는 점 양해 부탁드립니다. 2. 목차 - 리액트란? - 리액트의 기본 개념 (컴포넌트, jsx, props, state) - 생명주기 ( Life-cylcle) - 글을 마치며 리액트란? 페이스북 (Facebook)에서 개발한 오픈소스 라이브러리이며 사용자의 인터페이스(UI)를 구축하는 데에 사용합니다. 주로 SPA(Single page application)에서 복잡한 사용자 인.. 더보기 [공부하면서 쓰는] Javascript와 Typescript의 차이 ※ 프론트엔드 개발자로 취업 준비하기 위해 쓰는 게시글입니다. 글솜씨가 부족할수 있으니 양해 부탁드려요 :) 부족한 부분이 있으면 말씀 부탁드려요 이 글에서는 자바스트립트 타입스크립트에 대해 짧게 작성하며, 마지막엔 자바스크립트와 타입스크립트의 차이를정리할 예정입니다 ★ 글 순서 Javascript Typescript 자바스크립트와 타입스크립트의 차이점 1. Javascript 정의 : 자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어입니다.(출처: 모던 자바스크립트) 변수 - 데이터를 저장하는 공간으로 var, let, const를 사용하여 선언. * var, let, const의 차이 var : ES5에서 변수를 선언할 수 있는 방법으로 재선언, 재할당이 .. 더보기 4월 3째주 WIL 1 . 내일배움캠프때 배운 것 - 특강 : github의 이해와 깃허브로 어떻게 팀 협업을 하는지에 대해 배우는 시간을 가졌다. - 이번주는 팀별로 미니 프로젝트를 만들고 발표하는 시간이었다. 주제는 ' 우리 팀 소개 ' - 개인공부 시간엔 자바스크립트 기본부터 차근차근 공부하였다 2 . 회고 (이번주를 돌아보며 부족했던 점,아쉬웠던 점) - 집중력이 부족하여 전 집중으로 코딩을 하지 못하였던 점이 아쉽다. - 공부의 방향성을 몰라 헤메였던 경우가 많았다. - 미니프로젝트 코딩할 때 자바스크립트 활용이 부족했다 - 팀 소통 부족 3. 앞으로의 계획 - 팀 프로젝트 할 때에는 말 많이 해보기 - 모르는 부분에 있어서 정리하여 질문해보기 - 자바스크립트 분량 정해서 공부하기 - 자바스크립트 무한반복 더보기 4월 둘째주 공부 마무리하며 .. 내일배움캠프의 사전캠프 마지막이다. 다음주부터 12시간 쭈욱 앉아서 공부를 해야한다. 요새 집중력이 떨어져서 1~2시간이 최대 집중력인데 다음 본캠프부터는 차근차근 공부 집중력을 올려야 겠다고 생각했다. 최근에 자바스크립트가 너무 어려워서 질문 한번 했었었고 프로그래머스를 추천해주셔서 1~2시간씩 입문문제로 풀어보았다 그때그때 하면서 배운 코드를 정리하고 그다음에 핸드북으로 보면서 마무리했다 . 아직까지 코드를 자력으로 풀기엔 내 실력이 멀었다고 생각한다ㅠ 더 잘해야지 어쩌겠어..ㅎㅎ 가보자고~ 더보기 이전 1 2 3 다음
