React 독학 [ JSX ]

JSX란?

jsx는 함수호출과 객체 생성을 위한 문법적 편의를 제공하는 JacaScript의 확장이다 .

HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다른 부분이 있다.

JSX는 Bavel에 의해서 Transcompile 된다.

const a = () =>{
	return(
    	<div>
        	<p>반갑습니다</p>
        	<MyComponent>사이좋게 지내요</MyComponent>
        	<div>또봐요</div>
        </div>
        );
 }

 

 

장점

1. 개발자의 편의성 생상 향상

2. 협업에 용의 

      -개발자가 아니라도 디자이너가 JSX로 작성된 코드를 보았을때 대략적으로 이해가 가능하여 협업에 용의하다.

3. 문법 오류와 코드량 감소

     - 복잡한 코드를 짧게 작성 가능

 

 

특징

HTML 태그 내에 JavaScript 연산

// HTML + JS 사용 시
<div>
	<span id = "a"></span> +
    <span id = "b"></span> =
    <span id = "sum"></span>
</div>


<script>
    const a = 4;
    const b = 6;
    document.getElementById("a").innerHTML = a;
    document.getElementById("b").innerHTML = b;
	document.getElementById("sum").innerHTML = a+b;
</script>

JSX 이용 시

const app = () =>{
	const a=3;
    const b=6;
    return <div>{a} + {b} = {a+b}</div>
    }

JSX의 경우 HTML 중간에 중괄호만 넣으면 바로 JavaScript 코드를 사용 할 수 있어 훨씬 간결해진다.

 

 

class ->className

//HTML 의 경우
<div class = "hi"> </div>


//JSX 의 경우
<div className="hi"> </div>

 

 

스타일은 object로 입력해야 한다.  {{}}

<div className="hi" style={{ padding:10,color:'red'}}> 
	{name}님 안녕하세요 <br />
</div>

//첫번째 {는 JavaScript를 사용하겠다는 의미
//두번째 {는 Script 의 object의 시작을 알리는 의미

 

닫는 태그 필수

- 기존 HTML 에서는 닫는 태그를 작성하지 안항도 에러가 발생하지 않으며

<input> , <br> 같은 일부 태그의 경우 아예 닫는 태그를 생략하여 코드를 작성해도 되었지만,

JSX에서는 닫는 태그를 필수로 작성해야 한다 .

<input /> , <br / >

 

최상단element는 반드시 하나

JSX의 원칙 상 최상단 Element 는 한 개만 작성이 가능하다.

때문에 이를 <div> 또는 <React.Fragment> 또는 <>  를 이용해 감싸야 에러가 발생하지 않는다.

 

 

 

Component 란?

1. React 에서 페이지를 구성하는 최소단위

2. Component의 이름은 대문자로 시작

   -일반적인 HTML과 차별화를 두기위해

 

3. Class Component / Function Component 로 나뉨

  -초기 React 의 Component 는 모투 Class Component였으나 이후 v16부터 새로운

    Function Component 와 Hooks 개념이 발표되었으며 현재는 Function Component 가 주로 사용되고 있다.

 

  [ Class Componen ]

 class 개념이 많이 활용되는 java 개발자에게 친숙한 형태이다.

 React의 생명주기를 파악하기 쉽다.

 

4. Controlled Component / Uncontrolled Component

 

*컴포넌트끼리 데이터를 주고받을 땐 Props

*컴포넌트 내에서 데이터를 관리할 땐 State

*데이터는 부모 -> 자식으로만 전달