TIL) 스파르타 개발일지 22-12-05

오늘 배운 JSX 문법

 

1. 태그는 항상 잘 닫기

<input type="test" />

내가 알던 HTML이랑은 뭔가 다른 생김새다... 아무튼 잘 닫아주자!

 

 

 

2. JSX에서는 1개의 Elemaent 만 반환(Return) 할 수 있다.

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );
  
 //두개의 엘리먼트 <p>, <input>을 App이라는 클래스네임을 가진 div로 묶어 하나의 엘리먼트로 만들었다.

 

 

 

3.  가장중요  세 번째, JSX에서 자바스크립트를 사용하려면 중괄호를 반드시 써야한다.

	const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );

값을 가져올 때 뿐만 아니라, map, 삼항연사자 등 JS 문법 사용 시  반드시 {} 중괄호를 입력해주자.

 

 

4. class 대신 className을 사용하자.

<div className="App">

 

5. 인라인으로 style 주기 (HTML 처럼 스타일을 직접 주기는 이제 그만~)

<p style="color: orange; font-size: 20px;">orange</p>
//HTML

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}
//React JS

 

여기서 잠깐! Props 란 무엇일까?

 

사전적의미로는 '소품' 이다.

 

React에서 Props 란?

props

props는 property의 약자로, 부모에게 받아온 데이터입니다. 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없습니다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있습니다.

아마 상속을 뜻 하는 것 같다.

 

 

PropsTypes 에 대한 React 공식 문서 https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper

PropTypes와 함께 하는 타입 검사 – React

 

React에서 State 란?

 

'State'를 사용하는 이유

JS에서는 변수 할당시 const 와 반대 되는 let을 사용하여 변수를 선언해주었다 왜그럴까??

 

const로 선언함으로 state 변수를 직접 수정하는 것을 방지하고,

 

setState를 사용하게 하기 위함이 const로 선언되는 이유라고 할 수 있다!

 

또한, React에서는 let을 사용 시 변경된 값이 바로 반영되지않는다.

 

그러므로, 빠른 리렌더링을 위해 우리는 'State'와 const를 사용하여야한다.

 

State를 사용하기 위해 도움을 주는 Hook 이 있다.

 

그건 바로 'useState' 이라는 녀석 바로 사용법을 알아보자

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
          props.setName("박할아"); // 드디어 받은 setName을 실행합니다.
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} /> // 값을 받아서 Child에게 다시 주고
  );
}

function GrandFather() {
  const [name, setName] = useState("김할아"); //초기값을 '김할아'로 선언
  return <Mother grandFatherName={name} setName={setName} />; //mother를 호출 
}

function App() {
  return <GrandFather />;
}

export default App;

위 코드에서는 총 4개의 Component가 있다. (Child, Mother, GrandFather, App)

 

이처럼 props와 usestate를 통해서 값을 변경하고, 상속시켜줄 수 있다.

 

글 작성 참고 블로그 : https://dudghsx.tistory.com/18