React 오프라인 3강 - 기본문법

---

JSX 문법

자바스크립트에 html을 넣는 방법

function App() {
  return <div>
  안녕
  </div>
  <h1>해딩태그</h1>;
}

1. 여기에서 <h1> 태그에 문법 오류가 난다.
2. 왜냐하면 리액트는 하나의 태그만 return하기 때문이다.
3. 따라서 이를 하나의 태그로 만들어버리면 된다.

function App() {
  return <div>
  안녕
  	<h1>해딩태그</h1>
    <hr />
  </div>;
}

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

변수를 만드는 법

let a = 10;

function App() {
  let a = 10;
  return <div>
  안녕
  	<h1>해딩태그</h1>
    <hr />
  </div>;
}

1. 자바스크립트 파일이기 때문에 이렇게 변수를 넣을 수 있다.
2. 모든 것이 1급 객체이기 때문에 class에 넣을 필요가 없다.
3. 변수 선언을 할 때 타입이 없기 때문에 let 혹은 const로만 해야 한다.
4. var를 사용하면 scope가 다르기 때문에 꼬이기 때문이다.

let a = 10; // 변수
const a = 20; // 상수

let a = 10; // 변수
const a = 20; // 상수

function App() {
  return <div>
  안녕 {a}
  	<h1>해딩태그 {b}</h1>
    <hr />
  </div>;
}

5. 변수를 JSX 문법에 넣으려면 {}를 사용해야 한다.

if문 사용하기

1. JSX 안에서는 if문 사용이 불가하다.
2. 따라서 삼항연산자를 사용해야 한다.

let a = 10; // 변수
const a = 20; // 상수

function App() {
  return <div>
  안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}
  	<h1>해딩태그 {b}</h1>
    <hr />
  </div>;
}

3. 삼항연산자는 조건 ? 값(ture) : 값(false)이렇게 사용한다.

조건부 렌더링

let a = 10; // 변수
const a = 20; // 상수

function App() {
  return (
  <div>
  	안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}
  	<h1>해딩태그 {b == 20 && '20입니다.'}</h1>
    <hr />
  </div>
  );
}

1. && 문법은 false가 없다.
2. 조건부 렌더링은 조건 && 값(only true) 이렇게 사용한다.

return();에 대해서

1. 리턴하는 값이 한 줄이면 괄호가 필요없지만, 한 줄 이상이면 괄호가 필요하다.

변수 선언

let a = 10; // 변수
const a = 20; // 상수

function App() {
  let c;
  let d = undefined;
  console.log(1, c); // undefined
  return (
  <div>
  	안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}
  	<h1>해딩태그 {b == 20 && '20입니다.'}</h1>
    <hr />
  </div>
  );
}

1. undefined는 변수 정의를 했지만, 값은 정의되지 않았다는 뜻이다.
2. 다른 언어였다면 변수 선언만 했다면 null이 떴을 것이다.

css 디자인

1. 내부에 적는 방법과 외부 파일에 적는 방법이 있다.
2. 외에는 라이브러리를 사용하는 방법이 있다.
   1. bootstrap, componet-styled

let a = 10; // 변수
const a = 20; // 상수

function App() {
  let c;
  let d = undefined;
  console.log(1, c); // undefined
  
  const mystyle = {
    color: 'red',
  };
  
  return (
  <div>
  	<div style={mystyle}> 안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
  	<h1>해딩태그 {b == 20 && '20입니다.'}</h1>
    <hr />
  </div>
  );
}

3. css를 적용할 때 상수로 된 오브젝트를 통해서 변수 바인딩을 할 수 있다.

4. 하지만 이런 방법은 추천하지 않는다.

5. 자동완성도 되지 않고 코드가 더러워진다.

6. 따라서 App.css에서 css를 적용하는 게 좋다.

let a = 10; // 변수
const a = 20; // 상수

function App() {
  let c;
  let d = undefined;
  console.log(1, c); // undefined
  
  const mystyle = {
    color: 'red',
  };
  
  return (
  <div>
  	<div style={mystyle}> 안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
  	<h1 className="box-style">해딩태그 {b == 20 && '20입니다.'}</h1>
    <hr />
  </div>
  );
}

7. 이렇게 App.css에서 디자인을 한 후에 className 속성을 통해서 스타일을 넣어준다.

---

출처

React 오프라인 3강 - 기본 문법 메타코딩