React

react앱의 구성 블록 

element 

component

 

JS의 라이브러리 

JS튜토리얼 살펴보기 

 

1. JSX 

const element = <h1>Hello, world!</h1>

변수                  html태그 

=> 문자열도 html도 아님 

=> JSX: JS를 확장한 문법 

           UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것 권장 

           React element를 생성한다 

 

JSX란? 

React에선 이벤트(사용자가 화면에 하는 모든 행동)가 처리되는 방식, 시간에 따라 state가 변하는 방식,

화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 

둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리( 마크업?? 로직??)  

필수는 아니지만 JS 코드 안에 UI 관련 작업을 할 때 시각적으로 도움이 된다 

 

1) JSX에 표현식 포함하기

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>; 

ReactDOM. render(

  element, 

  document.getElementById('root')

);

 

=> JSX의 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다 

ex. 2+2, user.firstName 또는 formatName(user) 

JavaScript 함수 호출의 결과인 formatName(user)을 <h1> 엘리먼트에 포함 

 

const user = {

 firstName: 'Harper', 

 lastName: 'Perez'

};

 

function formatName(user){ 

  return user.firstName + ' ' user.lastName;

} 

 

const element = (

<h1> 

 Hello, {formatName(user}}!  => JS식을 {}를 사용해 <h1>엘리먼트에 포함

</h1>

};

 

ReactDOM.render(

 element, 

 document.getElementById('root')

); 

 

JSX도 표현식 

컴파일이 끝나면 JSX 표현식이 정규 JS 함수 호출이 되고 JS 객체로 인식된다 

JSX를 if구문 및 for loop 안에 사용하고 변수에 할당하고 인자로서 받아들이고 함수로부터 반환할 수 있습니다 

function getGreeting(user) {

 if(user){ 

     return <h1> Hello, {formatNAme(user)}!</h1>; 

} 

     return <h1>Hello, Stranger.</h1>;

}

 

JSX 속성 정의 

속성에 따옴표를 이용해 문자열 리터럴 정의 가능

const element = <div tabIndex = "0"></div>;

-> tabIndex 상수에 리터럴 0을 ""를 이용해 정의한다 

cf. 리터럴(Literal)이란?

리터럴은 데이터 그 자체를 뜻 한다. 

변수에 넣는 변하지 않는 데이터를 의미하는 것이다. (변하지 않는 변수 = 상수)

int a = 1;

int 앞에 final를 붙일 시 , a는 상수가 된다. 여기서의 리터럴은 1이다.

즉, 1과 같이 변하지 않는 데이터(boolean, char, double, long, int, etc...)를 리터럴(literal)이라고 부른다.

출처: https://mommoo.tistory.com/14 [개발자로 홀로 서기]

 

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수 있음

const element = <img src = {user.avatarUrl}></img>;

 

cf.

attribute는 무엇인가?

Attributes는 HTML 요소의 추가적인 정보를 전달하고 이름=“값” 이렇게 쌍으로 온다. 예를 들어 <div class=“my-class”></div> 를 보면 div 태그가 class 라는 값이 ‘my-class’인 attribute를 가지고 있다.

property는 무엇인가?

Property는 attribute에 대한 HTML DOM 트리안에서의 표현이다. 그래서 위 예시에서 attribute는 값이 ‘my-class’이며 이름이 ‘className’인 property를 가진다.

 

but 어트리뷰트에 JS 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마세요

따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에  두가지 동시X.

JSX는 HTML보다 JS에 가깝기 때문에 React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙 tkdyd 

ex. JSX에서 class는 className.