react(1)

수민·2022년 11월 25일

code

목록 보기

17/47

React

jsx를 활용한 선언형 프로그래밍
하나의 파일에 명시적

컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발

범용성

React는 Javascript 프로젝트 어디에든 유연하게 적용
Facebook에서 관리되어 안정적이고 가장유명,리액트 네이티브로 모바일개발 가능.

JSX

React에서 UI를 구성할때 사용하는 문법 JavaScript를 확장한 문법
React는 Babel을 이용한 컴파일과정이 필요.
JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
```
// 실제 작성할 JSX 예시
function App() {
	return (
     <h1>Hello, sumin!</h1>
   );
}
```

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
return React.createElement("h1", null, "Hello, sumin!");
}



-  JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.


### 🧇 JSX 문법

####  1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
-	Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.


ex) 에러 케이스
```javascript

// Fail to compile
// parsing error : adjacent JSX elements be wrapped in an enclosing tag
// Did you want a JSX fragment <>...</>?

function App() {
	return (
		<div>Hello</div>
		<div>Kimsumin!</div>
	);
}

-----------------------------
ex) 정상 코드1 (<div></div>)
            
            // div를 사용 하였기 때문에 스타일 적용시 작성한 코드를 div로 한번 더 감쌌다는 부분을 고려해야 한다.
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>kimsumin!</div>
		</div>
	);
}

😒 자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

function App() {
	const name = 'kimsumin';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

if문(for문) 대신 삼항 연산자(조건부 연산자) 사용

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.

그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.

function login(){
  let message="";
  let login='true';
  if(login==='true'){
   message=<div>kimsumin</div>
  }    else{
   message=<div>Error</div>
  }

  return (
   <>
   {message}
   </>
  )
}

function login(){
    const loginname='true';

    return(
        <>
        <div>
            {loginname==='true'(
                <div>kimsumin</div>
            ):(
                <div>준회원 입니다.</div>
            )}
        </div>
        </>
    )
}

4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다.

JSX스타일링

JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.
카멜 표기법으로 작성해야 한다. (font-size => fontSize)

function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div style={style}>Hello, GodDaeHee!</div>
	);
}

🍔 class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때에는 class 라는 속성을 사용한다.
JSX에서는 class가 아닌 className 을 사용한다.

function App() {
const style = {
backgroundColor: 'green',
fontSize: '12px'
}
return (

	<div className="testClass">Hello, kimsumin!</div>
);

}



5. JSX 내에서 주석 사용 방법
 - JSX 내에서 {/*…*/} 와 같은 형식을 사용 한다.
 
 
 ### 자바스크립트 명언랜덤
 
 ```javascript
import logo from './logo.svg';
import './App.css';

function App() {

  const proverb=['좌절감으로 배움을 늦추지마라.','stay forme','history','random','good']
  const getRnadom=(length)=>{
    return parseInt(Math.random()*length);
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
       {proverb[getRnadom(proverb.length)]}
      </header>
    </div>
  );
}

export default App;


import "./ExpenseItem.css";

function ExpenseItem() {
  // 날짜 객체생성
  const expenseDate = new Date(2022, 12, 25);
  const expenseTitle='car Insurance';
  const expenseAmout=294.67;


  return (
    <div className="expense-item">
      <div>{expenseDate.toISOString()}</div>
      <div class="expense-item__description">
        <h2>{expenseTitle}</h2>
        <div class="expense-item__price">{expenseAmout}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;