carrots-day

React props, state 둘다 react 데이터 핸들링 javascript 객체로 key, value 형태를 띄며 데이터 원 주인이 누구인가에 따라 구분된다. props는 부모로 부터 전달받은 데이터로 외부에서 주입되는 객체다. 한마디로 위에서 아래로 내려오는 구조며 변경이 불가능하다. state는 각 Component가 소유하는 영역으로 내부에서 사용되는 데이터 객체다. 👽 궁극적으로 함수의 파라미터(props)와 함수 내 지역변수(state) 차이로 이해하면 된다. 그리고 기본적으로 Component의 화면은 함수 내 지역변수로 인해 제어된다. props 부모 Component로 부터 전달받은 데이터 객체 최초 렌더 이후 자동 리렌더링 되지 않음 (생명주기 메소드 사용해야됨) 읽기전용 (데이..

React Component React의 컴포넌트는 앱을 구성하는 화면을 별개의 모듈로 나눈 단위로 Javascript와 JSX로 구성된 모듈을 반환하여 화면을 구축한다. React 앱을 구현하는데 있어 가장 기본적인 단위, 컴포넌트다. 컴포넌트의 핵심은 기능의 모듈화와 재사용성에 있다. 기능을 모듈화하여 관리포인트를 통일화하여 유지보수성을 증대시킬 수 있고, 모듈 형태이기 때문에 필요한 곳에 레고처럼 끼워넣어 사용할 수 있다. 이것이 React 앱을 구현하는 가장 기본적인 방법이다. CRA를 통해 React app을 만들면 App.js가 있다. App.js도 App이라는 컴포넌트를 return하는 형태로 되어있다. App은 모든 Component의 부모 컴포넌트다. Component의 선언방식 Clas..

React 디자인 패턴 React의 Component, 상태관리에 대한 글을 쓰기 전에 Flux 패턴, 즉 단방향 바인딩 디자인 패턴에 대한 내용을 이해해야 할 필요를 느낀다. 데이터 추적이 힘든 MVC 한계를 극복하기 위한 대안으로 제시된 Flux와 MVC 패턴의 문제, Flux 패턴의 필요성에 대해 알아보자 MVC 패턴 먼저 MVC패턴의 아키텍쳐에 대해 알아보자. 먼저 MVC 패턴은 Controller, Model, View로 프로세스를 분리하여 데이터의 CRUD를 제어하는 디자인 패턴이다. 그림에서 보듯 Controller로 요청을 받고, 내부 비즈니스 로직 수행 후 결과 데이터(Model)을 View로 전달한다. 해당 View를 통해 사용자에게 제공되며 View를 통해 데이터를 입력하면 View ..

Vue.js Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. React와 더불어 프론트엔드 개발의 양대 산맥, Vue.js다. React의 후발주자로 공개된 기술로 Google JavaScript 프로그래머인 Evan You가 개발했으며 React, Angular와 같은 PA 개발을 위한 프레임워크다. 특징 MVVM 패턴 (Model View View Model) : Front-end와 Back-end 로직을 분리하여 코드를 구성하는 디자인 패턴이 기반이며 View와 Model을 분리하여 개발 효율성을 극대화한다. 용어 설명 뷰 (View) 사용자에게 보이는 화면 돔 (DOM) HTML 문서에 들어가는 요소(태그, 클래스, 속성..

JSX JSX(Javascirpt XML)는 React에서 사용하는 XML과 Javascript를 혼용하는 문법이다. React에서는 UI와 렌더링 로직을 결합하여 구현할 수 있는 언어를 지원한다. 바로 JSX다. React 입문시 러닝커브에 꼭 거론되는 녀석인데 요약하자면 React 전용 문법이다. 근데 솔직히 HTML, XML, Javascript를 어느정도 다룰 줄 안다면 대충 코드만 봐도 사이즈나온다. 예시 (App.js) 이전 포스팅에서 만든 React App을 열어보면 App.js가 있다. main Component에 해당하는 소스다. CRA를 통해 프로젝트를 생성하면 기본적으로 App.js가 생성된다. 모든 Component의 시작점이 되는 부분이다. 언뜻 보기엔 일반 HTML와 비슷해보이지..

이벤트의 전파 이벤트는 상위에서 하위, 하위에서 상위로 전파되는 특징을 지녔다. 전파 방향에 따라 버블링, 캡처로 구분된다. 이벤트에 대해 공부하다 보면 버블링, 캡쳐, 위임에 대한 내용을 한번쯤은 봤을 것이다. 이번 글에서 브라우저에서 특정 화면 요소의 이벤트를 감지하는지, 그 이벤트를 어떻게 다른 화면 요소에 전파하는지 알아보자 이벤트 버블링 (Event Bubbling) 특정 화면 요소에서 이벤트가 발생하였을 때, 특정 요소뿐이 아니라 상위 요소들로 전파되는 특성을 의미한다. 버블링은 하위요소 부터 시작해 최상위 요소까지 전달된다. 코드로 보면 이해가 가능하다. const divs = document.querySelectorAll("div"); // 각 div 객체에 이벤트 등록 divs.forEa..

이벤트 (Event) 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 존대해도 간지나는 척 말하는건 좀 재수없다. 쉽개 말해서 브라우저에서 일어나는 브라우저에서의 사건을 말하는 것이다. 여기서 사건이란 사용자가 특정 행동을 했을 때 상호작용으로 인해 발생하는 것을 말한다. 예를 들어 당신이 브라우저 버튼을 클릭하면 클릭 이벤트가 발생하는 것이다. 이벤트 종류 전적으로 많이 사용하는 이벤트를 정리해봤다. (사실 다른 글에서 퍼옴 ㅎㅎ) 정리 잘해놓으셨네 ㅋㅋ.. JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결 ..

AJAX (Asynchronous JavaScript And XML) 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. AJAX란 주로 웹 서버(백엔드 소스)와 통신할때 사용하는 기법으로 브라우저 내장 XMLHttpRequest 객체를 통해 웹 서버와 비동기적 통신을 중개하는 것을 말한다. 비동기 처리에 관한 내용은 이전글에서 작성했으니 그거 보면된다. >> 동기/비동기 처리, callback/Promise/async & await [ 동기/비동기 처리, callback/Promise/async & await ] 동기/비동기 처리의 개념과 callback/Promise/async&await에 대해 알아보자 velog.io 에이잭스, 아작스등으로 불리는데 뭐가 맞다 ..