![]()
https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 위와같은 react 자습서를 기반으로 작성하였습니다. 1. 함수 호출 function formatName(user){ return user.firstName +' ' + user.lastName; } const user = { firstName:'Harry', lastName:'Potter' } const element = ( Hello, {formatName(user)}; } formatName에서 user을 받아와, user.firstName 과 l..
![]()
1. Component : 작은 컴포넌트들이 모여 큰 컴포넌트를 만들고, 큰 컴포넌트들이 페이지들을 만든다. React component : function으로 생각하면 된다. (Props) 속성들을 입력 받아, 그에 맞는 react element를 만든다. 2. Props (Property: 속성) : React component의 속성을 의미한다. 붕어빵틀에서 들어가는 재료 -> 컴포넌트에 전달할 다양한 정보를 담고 있는 js 객체 네개의 틀이 비슷하고, 형태가 비슷하지만 각각 다른 이미지와 텍스트를 사용한걸 보면, 각각의 props를 사용한 걸로 알 수 있다. 3. Property 특징 및 적용 특징: Read only -> 값을 변경 할 수 없다 //Pure Code function sum(a,b..
![]()
1. React의 Elements의 정의 -> Elements are the smallest building blocks of Reack apps. (리액트 앱을 구성하는 가장 작은 블록들) 리액트의 element는 dom element의 가상 형태를 의미한다 -> react elements는 javascript 객체 형태로 존재한다. //html component로 들어가있는 code { type: 'button', props:{ className: 'bg-green', children:{ type: 'b', props:{ children: 'Hello, element!' } } } } html 태그 이름이 문자열로 들어가는 경우, element는 해당 태그 이름을 가진 DOM노드를 나타내고, prop..
![]()
사용자 interface를 위한, React : javascript library - library : 제어권한이 개발자들한테 있다. JSX: A Syntex Exentansion of JavaScript const element = Hello, world js + html 코드가 합쳐져있는 jsx 코드이다. -> XML & HTML 코드를 javascript 로 바꾸는 과정에서 JSX를 사용한다. //JSX 사용한 코드 const element = { kakao Cloud School } //JSX 사용하지 않은 코드 const elemnet = React.createElement( 'h1', { className : 'kakao'}, 'kakao Cloud School' ) react element ..
