react 문법 1

 

1. return 시에 하나의 DOM만 리턴할 수 있다. 

 

하나의  태그만 리턴을 해준다. 위의 그림에서 보면  노랑밑줄이 그어져있는 코드를 보자

태그가 2개가 있어서 리턴이 안되는 것을 볼 수 있다. 아래의 그림에서 보듯이 하나의 태그안에 넣어주면 가능하다.

 

또 주의해야할 점이 하나의 태그안에 코드를 넣는다고 하더라도  리턴이 두개 이상이 되면 에러가 발생한다. 즉, 리턴시에 하나의 DOM만 리턴할 수 있다. 

 

 

 

 

2. 변수 선언은 let 혹은 const로만 한다

 

var 변수는 함수 안에서 선언이 되면  보통 함수안에서만 사용이 된다고 알고있다. 그런데 함수 밖에서도 사용이 되는 스코프가 변칙적이기 때문에 가능하면 var 함수를 사용하지 않고 let 과 const 로 사용을 하는 것이 이상적이다. 

let 은 변수를 나타내고 const는 상수를 나타낸다. 

 

사용방법으로는 let과 const 는 자바스크립트 언어이며

함수안에 JSX 로 사용하기 위해서는  { } 를 사용한다. 

 

 

3.  if문 사용 불가능  -> 삼항연산자 사용가능  

 

 

 

 

4.  let c  변수를 선언하고 출력 , 조건부 렌더링(조건 && 값(true)

 

 

 

 let d의 변수에 정의한 undefined 와 같은 출력결과를 볼 수 있다. undefined 는 변수는 있는데 값이 정의 되지 않은 것이다. 

 

 

 

5.   CSS 디자인 

 

• 내부에 적는 방법
• 외부에 적는 방법

 

 

 

1) 내부에 적는 방법

 

JSX 사용시 -> 중괄호 { }사용

div 태그에 html에서 사용하듯이 style 태그를 달고 그 안에 중괄호를 넣는다. 

JSX 사용하기 위해서 중괄호를 넣는 것이며  const mystyle 변수를 안에 넣어서 사용한다. 

 

 

 

2. 외부에 적는 방법

 

App.css 파일에  아래와 같이 적는다. 

box- style 을 h1 태그의 className으로 정의하여 사용한다.