Back to the Basics

공식 홈페이지도 참고해보자! React 방식과 DOM 방식 차이 React Event Handling은 DOM의 처리 방식과 비슷하지만 몇 가지 차이점이 있다. 문법적인 차이는 공식 홈페이지에서도 나와있듯이 React에서 Event는 camelCase로 사용한다 JSX를 사용하여 "함수"로 Event Handler(이벤트 처리 함수)를 전달한다. 예를 들면 아래의 코드와 같다. {/* HTML */} Click me {/* React */} React는 이러한 값을 컴포넌트의 State로 관리하고 업데이트한다. Onchange는 input의 text가 바뀔 때마다 발생하는 이벤트이다 onChange Event가 발생하면 e.target.value를 통해 이벤트 객체에 담겨 있는 input값을 읽어올 수 ..

State Application에서 Sate란 컴포넌트 내에서 변할 수 없는 값이며 상태는 React State로 다뤄야 한다. [20100810]- React-State and Lifecycle 공식문서를 보고 state와 props에 대해 정리한 글이다. 참고해보자~! State hook, useState Hook이란 무엇일까??? 공식 홈페이지에 의하면 Hook은 "React feature를 연결할 수 있는 특수한 함수"라고 한다. React를 다루기 위해 특별히? 사용되는 함수라고 생각하면 될까..?? React에서는 useState라는 특별한 함수를 통해 state를 다룬다. useState는 React Hook중의 하나이며 React state를 추가할 수 있게 해주는 Hook이다. How t..

React State & Props Achievement Goals state, props의 개념에 대해서 이해하고, 실제 프로젝트에 적용할 수 있다. React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 State를 정의 및 변경할 수 있다. React 컴포넌트 (React Component)에 props를 전달할 수 있다. 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다. 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다. React의 단방향 데이터 흐름(One-way flow)에 대해 자신의 언어로 설명할 수 있다. State & props Intro..

보호되어 있는 글입니다.

간단하게 오늘 배운 lesson 내용을 정리해 보았다. React SPA Achievement Goals SPA(Single-page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다. SPA SPA란? SPA(Single Page Application : 페이진 갱신에 필요한 데이터만 입력받아 현재 페이지의 정보를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션 또는 사이트를 말한다. 전통적인 웹사이트는 사용자의 요구가 있을 때마다 페이지 전체를 로딩한다. --> "깜빡인다" 라고 표현한다. SPA는 업데이트가 필요한 부분만 새로 불러온다(중복되는 부분은 불러오지 않는..

이 포스트는 React 공식문서를 참고하여 작성하였습니다. State 란? state는 component 내에서 변할 수 있는 값이다. 예를 들어, 쇼핑몰에서 제품을 선택하는 체크박스를 예로 들 수 있다. 여기서 상태는 체크박스를 checked 상태와 uncheck 한 상태로 볼 수 있다. state는 local 또는 캡슐화라고도 불리며 **state가 소유하고 설정한 component 이외의 component도 접근할 수 없다. 부모 -> 자식 의 하향식 (단방향식 이라고도 불림)의 데이터 흐름만 가능하다 : 어떤 하나의 component는 자식 component의 props로 그것의 state를 넘겨줄 수 있다. state는 특정한 component에 의해 소유되며 , 이 state로부터 파생된 데이..

이 글은 Reac 공식문서를 통해 공부한 내용을 요약한 포스트입니다. Components and Props component는 Javacript의 함수와 비슷하며 다음과 같은 특징을 갖는다. props를 입력받고 screen에 어떻게 표시되는지를 기술하는 React Element를 return 한다. Function and Class Component component는 function 또는 class를 통해 정의된다. Function Component function Welcome(props){ return Hello, {props.name} ; } 위의 함수는 props를 입력으로 받고 React Element를 return 하므로 React component이다. Class Component cla..

React Intro map을 이용한 반복 Reat에서 여러 데이터를 렌더링 할 때 사용하는 map method에 대해 학습해보자. map method가 생각이 잘 안나면 이전 포스팅 을 잠시 읽어보자..!! "In React, the map() function is most commonly used for rendering a list of data to the DOM." 만약 블로그에 몇 십, 몇 백개의 포스틀르 하드코딩(hardcoding : 모든 데이터를 코드에 작성하는 것)으로 작성을 한다면 타자연습은 되겠지만, 매우 힘들것이다. 손가락도 아프고,,, 손가락은 소중하다, 그리고 키보드 수명도 줄지않을까..아무튼.. 이럴 때 map을 이용하여 반복 을 하면 나의 손가락 관절과 키보드의 수명을 좀 ..