분류 전체보기 (127) 썸네일형 리스트형 이벤트 처리 리액트의 이벤트 처리(이벤트 핸들링: Event handling) 방식은 DOM의 이벤트 처리 방식과 유사합니다. 단, 몇가지 문법 차이가 있습니다. 리액트에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러: Event handler)를 전달합니다. 예를 들어, HTML에서 이벤트 처리 방식이 아래와 같다면, Event 리액트의 이벤트 처리 방식은 아래와 같습니다. Event 리액트에서 이벤트 처리하는 기본 방식은 위와 같습니다. 다음은 자주 사용되는 이벤트 처리에 대한 예시입니다. onChange 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용됩니다. 리액트에서는 이러한 변경될 수 있는 입력.. State & useState state란? State는 Toggle Switch나 카운터처럼 컴포넌트 내부에서 변할 수 있는 값입니다. 실제 애플리케이션에서는 쇼핑몰 장바구니를 예로 들어보면, 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓습니다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태입니다. 이처럼 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다. useState 사용법 리액트에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다. useState를 이용하기 위해서는 React로부터 useState를 불러와야 합니다. 상단에 import 키워드로 useState를 불러옵니다. i.. Props props의 특징 컴포넌트의 속성(property)을 의미합니다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있습니다. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다. props는 읽기 전용입니다. pro.. 구조 분해 할당 (Destructuring assignment) 이 글은 코딩앙마 자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment) 강의를 듣고 정리한 글입니다. 구조 분해 할당이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식입니다. 배열 구조 분해 let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 2 x에 1이 들어가고, y에 2가 들어갑니다. let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; // let user1 = users[0]; // let user2 = users[1]; // let user3 = users[2]; cons.. props를 통해 컴포넌트에게 값 전달하기 이 글은 벨로퍼트의 리액트 5. props를 통해 컴포넌트에게 값 전달하기 글을 정리한 것입니다. props란? props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. props의 기본 사용법 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 가정해봅시다. 그러면 이렇게 코드를 작성하면 됩니다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 이제 Hello 컴포넌트에서 name값을 사용하고 싶을 땐 어떻게 하면 되는지 알아볼까요.. 와이어프레임 VS 목업 와이어프레임(wireframe) - 인터페이스 구성요소 (레이아웃, UI 등의 뼈대) 와이어프레임은 디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다. 기획단계에서 주로 제작되는 것으로, 제품의 모양, 혹은 웹페이지의 개략적인 레이아웃과 UI 요소등에 대한 뼈대를 의미합니다. 인터페이스 디자인을 위한 기본적인 비주얼 가이드. 여기에 시나리오, 컨텐츠 설명 등이 첨부되면 스토리보드가 됩니다. 스토리보드(Story Board) - 구성요소, 기능, 콘텐츠, 이동 흐름 웹서비스의 각 페이지 구성요소나 컨텐츠의 설명 및 페이지간의 이동 흐름 등을 기술한 문서를 말합니다. 목업(Mocku.. 1급 객체와 고차함수 개념 다시 정리하기 1급 시민(first-class citizen)의 세 가지 특징 1. 변수에 할당할 수 있다 2. 다른 함수의 인자로 전달될 수 있다. 3. 다른 함수의 결과로서 리턴될 수 있다. 대부분의 프로그래밍 언어에서 숫자는 1급 시민의 조건을 충족합니다. 숫자는 변수에 저장할 수 있고, 인자나 반환값으로 전달할 수 있습니다. 1급 객체(first class object)란? 1급 객체는 특정 언어에서 객체(object)를 1급 시민으로써 취급한다는 뜻입니다. 1급 시민의 조건을 모두 충족합니다. 1급 함수(first class function)란? 1급 객체 뿐만 아니라, 1급 함수도 존재합니다. 함수를 1급 시민으로 취급하는 것입니다. 몇몇의 학자들은 1급 시민의 조건과 함께 1급 함수에게 다음과 같은 추가적.. 김버그 DOM 영상 정리 이글은 유튜버 김버그의 DOM 영상 시리즈를 보고 정리한 글입니다. #1 DOM 이란? 자바스크립트에게 HTML 이란, 문자열입니다. 그 이상 그 이하도 아닙니다. 보여주는 역할을 하는 건 HTML, CSS가 지배적인데 자바스크립트는 이 녀석들을 컨트롤합니다. 이 문자열인 HTML을 자바스크립트가 알아들을 수 있게 바꾸는 작업을 프로그래밍 언어에서는 'parse'라는 말을 많이 쓰는데, 문자를 의미있는 객체로 바꾸는걸 parsing이라고 하고... 뭘로 바꾸냐 하면 node로 바꾸는 것입니다. node는? 종류같은 것 이라고 생각하면 됩니다. 제일 중요한건 document, element 이고 돔은 문자일 뿐인 HTML를 의미있는 노드객체로 바꿔서 추가적인 기능을 할 수 있게 해줍니다. append, r.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음
