리액트 썸네일형 리스트형 React - { 단순하게 보는 props 사용 흐름 } props, state 그리고 redux.... 변수, 인수, 저장소로 전달하고 전달받고.. 어떻게 구분해서 써야 할까.. 명확한 성격과 구분은 찾기 어렵거나 개발스러운 경직된 문서가 전부처럼 느껴지는 건 필자의 과장일까? 각설하고 일단 props부터 개단순하게 짚고 넘어가기다. Title, Body, Button 이란 3개의 컴포넌트로 구성된 Card 라는 컴포넌트를 만들 경우, 먼저 3개의 자식 컴포넌트를 만들고 props 인자를 작성합니다. // 여기선 사용하기 쉬운 함수형 컴포넌트로 만듭니다. (ES6 기준의 화살표 함수로..) // React 공식 문서에서 함수형 작성을 권장합니다. // 아래 예제는 편의상 3개 컴포넌트 파일을 모두 기재했습니다. // Title.js import React f.. 더보기 React {02 환경 설치} Node.js 환경에서 React 설치는 너무 쉬워 그냥 넘어가려고 했는데.. 입문자를 위한 글이라 짧게 짚고 넘어 갑니다. 모던한 개발(?)이라 하면 대세가 된 Node.js (서버사이드 자바스크립트)를 말하는 듯 합니다. IE, 크롬, 파이어폭스 등의 브라우저(클라이언트)에서 동작하던 Javascript가 이젠 Node.js를 PC에 설치하고 내 PC를 서버로 만들 수 있게 된 것이죠. 아닥하고 설치해보죠. 하나, 막강한 무료 IDE 에디터 Visual Studio Code (이하 vscode라 칭할께요) 설치 다운로드 code.visualstudio.com 후에 설치합니다. 두울, Node.js 설치 LTS 버전 다운로드 nodejs.org/ko/ 후에 설치합니다. 설치 후엔 윈도우 명령창(comm.. 더보기 React {01 개념찾기} 컴포넌트 기반 JS 라이브러리 React 개념 알아보기 (feat. 까막눈) 심플하게 React = Javascript UI 라이브러리 진화된 사용자 인터페이스(UI)를 만들 수 있도록 도와주는 도구라네요. - 페이지 새로고침 없이 페이지 내 필요 부분만 데이터 변경 (비동기) - 작성한 컴포넌트의 재사용 - 클래스형, 함수형 컴포넌트 작성 - 다양한 컴포넌트 리소스 지원 퍼블리셔 또는 입문자의 입장에서 React 학습을 위해 필자와 여러분은? Javascript(JS) 또는 기타 개발언어의 변수, 연산자, 조건문, 반복문, 함수 정도의 선행 학습이 필요하고 온라인 학습 도구인 codecademy Javascript등으로 기본 학습, 또는 W3school (Javascript) 등의 튜토리얼을 반복적으로.. 더보기 이전 1 다음
