월드스토리의 코딩 나라

props란?• properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 • props는 컴포넌트끼리 값을 전달하는 수단 • 상위 컴포넌트에서 하위 컴포넌트로 전달 (단방향 데이터 흐름) 함수형 컴포넌트 props // 부모 컴포넌트에서의 모습const Funccomponent = (props) => { return ( 안녕? {props.name} 반가워! );} //자식 컴포넌트에서의 모습Funccomponent.defaultProps = { name : '홍길동'} //자식 컴포넌트에서 기본값 설정• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터 로 전달받으며, JSX 내부에서 { } 기호..

JSX•  JavaScript + XML의 합성어• 자바스크립트 확장 문법으로 XML 과 유사• 바벨을 이용해 일반 자바스크립트 코드로 변환  JSX 문법 정리1. 전체는 하나의 태그로 html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로!html with JShtml를 작성하다가 중간에 js문법을 사용하고 싶을 때는 {중괄호}로 감싸야 합니다.단, for문과 if 문은  return 내부에서 사용할 수 없고, 삼항 연산자를 사용해야 함인라인 style 적용• CSS 를 인라인 형태로 적용할 때는 {object}형태로 저장해야 함• CSS 속성은 dash-case →camelCase • 그 덕분에 인라인으로 작성된 정보를 따로 {} 객체 형태로 빼내어 변수화하는..

Component• React의 꽃이라 불리는 React의 핵심이자 화면을 구성하는 하나의 부품• 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으 로 나누어 분리 가능 Component 트리 구조React 컴포넌트 종류 클래스형 컴포넌트 (Class Component)• render 함수를 반드시 사용해야 함 • lifecycle 기능 • 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용 함수형 컴포넌트 (Functional Component)• 짧고 직관적이며, 사용방법이 더 간단함 • 메모리 사용에 이점이 있음   클래스형 컴포넌트 vs.함수형 컴포넌트React 초창기에는 함수형 컴포넌트에는 현..

create-react-app를 이용한 React 프로젝트 생성하기• 리액트 앱(프로젝트)은 대문자는 사용 불가능이며, 단어 여러개 사용시 하이픈 기호로 구분함•  npx create-react-app [React App name] 해당 명령어를 사용하면 손쉽게 React프로젝트의 기본 뼈대를 생성할 수 있음npx는 npm의 자식 명령어로 npm보다 가볍게 패키지를 구성함npm버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능npm start 명령어를 이용하여, 만들어놓은 리엑트 구조를 실행할 수 있음 create-react-app으로 생성한 프로젝트의 구조   /node_modulesnpm 을 시작하면 생기는 폴더, 내부에 모듈과 관련된 정보가 들어있음/publicindex.html ..

React란?• 화면을 만들기 위한 자바스크립트 라이브러리• 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리• 사용자와 상호 작용이 가능한 동적 UI 제작 가능 React의 특징 4가지특징 종류의미Data Flow• 양방향 X 단방향 O 데이터 흐름 • Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐 름을 추적하기 힘들고 복잡해지는 경향이 있다. Component 기반 구조• Component : 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적 인 하나의 부품으로 만드는 방법 • React는 UI(View)를 여러 Component를 쪼개서 만들기에 코드 파악이 쉽다.• 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성하..

Angular JS • 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크• 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합• 2016년도 이후 점유율 하락 중• Ex) 유튜브, 페이팔, 구글, 텔레그램 등등  React JS• 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만 든 오픈 소스 JavaScript 라이브러리• 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합• Angular 보다 배우기 쉽다고 이야기 됨.• Ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등 Vue.js  • 2013년 출시된 JavaScript 프레임워크• Angular와 React의 장점을 수용한 프레임워크• 중국어 기반으로 Reference가 적음.• Ex) 샤오미,..