2021.06.04(Fri.) <JSX 문법의 기초>

1. React

• 요즘은 '웹' 도 좋지만 스마트폰의 활발한 보급과 함께, 기다림도 없고, 움직임 있는 웹과 스마트폰에서 둘 다 깔끔하게 사용할 수 있는 홈페이지를 원한다.
• 그때, React를 쓴다! 선언형, 컴포넌트 기반, 범용성 때문에 사용한다. (유지 보수도 좋고 쓰기 좋다 뭐 이런 이야기...)

2. JSX

• React 에서 사용하는 문법이다. 자바스크립트의 확장판이고, 여러가지 확장자 파일을 연결시켜서 사용한다.
• DOM 과 비교하면 엄청 간단하다. 일단 코드가 눈에 보기 편하다.
• HTML과 Javascript의 문법을 동시에 사용하여 코드를 만들기 때문이다. 이 기능과 구조가 어우러진 코드셋을 '컴포넌트' 라고 한다.

3. JSX를 자세히 알아 보자

1. 두개 이상의 앨리먼트는 무조건 하나의 앨리먼트로 감싸줘야 한다.
   • div 태그들이 엘리먼트를 포함하고 있다.
   • 꼭! 태그를 닫아 줘야 한다. 마지막에 /> 를 쓰면 짧게 닫을 수 있다.
   • 굳이, div를 또 써서 닫아주는게 싫다면 Fragment를 쓰면 된다. 굳이...? 그냥 div 또 쓰자.
2. <div> <div> <h1>Hello</h1> </div> <div> <h2>World</h2> </div> </div> // 이 줄이 없다면, 저 Hello, World를 한번에 감싸주지 못 했을 것이다. 그럼 오류난다!
3. 엘리먼트 클래스를 사용할때는 항상 className을 쓴다.
   • 그냥 class 아니다. 요즘버전은 똑바로 읽어준다고 카더라... 하지만 className 으로 똑바로 쓰자.
   • import 로 다른 파일에서 가지고 오는게 깔끔하다.
4. <div className="Hello">World</div>
5. 자바스크립트 문법을 사용할때는 { } (중괄호)를 쓴다.
   • 계속 쓴다. 사용법은 아주 다양하다.
6. 조건문은 '삼항연산자'를 사용한다.
   • 삼항연산자 : if 문의 작동과 같다. 하지만 생김새가 다르다. 맞을때가 (조건) ? (true의 결과) : (false의 결과) 라고 간단하게 생각할 수 있다.
   • 중괄호 뒤에 자바스크립트 문법 쓴다고 {if...} 이런 짓은 안되니까 하지말자. 창의력 대장이다.
   • <div> { (1+1 === 2) ? (<p>맞을때</p>) : (<p>아닐때</p>) } </div>
7. 배열 메소드들 다 사용가능!
   • map(주로 사용, 여러개의 HTML 엘리먼트를 표현할 수 있다, key 속성을 꼭 넣어주자.)
8. CSS를 React 에서 써보자.
   • 새로운 객체를 만든다, (const 같은걸로 하나 만들어 준다.)
   • 객체 안에 CSS 문법을 적는다.
   • 적용은 꼭 { } 중괄호를 넣는다..
   • 하지만 그래도 파일로 나눠서 따로 적는게 낫겠지?
9. 주석달기
   • 주석도 다르게 단다.
   • 무조건 멀티라인 (/*) 으로 만들면서, 중괄호로 감싸준다.

4. Component

• 일명, 기능을 위한 하나의 코드 뭉치. 트리구조로 이루어 져있다.
• 맨위에 improt 로 이것저것 연결해 주고, 클레스들이 있고 그런 형태의 파일이다.
• 이런 컴포넌트를이 모이고 모여 프로그램이 된다. 와!
• 이렇게 연결로 다른 컴포넌트에서 사용하는 것을 '렌더링'이라고 합니다.

5. props

• 부모가 자식한태 주는 값. 값을 직접 할당해주면 된다.
• 만약 this 를 사용할때 부모의 값를 똑바로 받지 못 할경우, 오류가 뜨는데, props로 부모의 값을 다시 되돌려 명시해 준다.

6. State

• 이미 컴포넌트 자체에서 가지고 있는 값
• 컴포넌트 내부에서 바꿀 수 있고, setState 로 만 값을 바꿔줄 수 있다
• 변수를 쓰지 왜 쓰냐? : 리액트를 웹 앱처럼 사용하고 싶다면 중요 데이터를 state에 보관해야 한다. 데이터가 바뀔 경우,
  　그냥 변수로 만드면 HTML 이 '재렌더링' 되기 때문!!! 새로고침을 하지 않아도 된다!!!! Wa!
• 버튼을 누르면 값이 증가하는 conter 을 보면 이해가 쉽다.
• let [원하는 요소, 요소에 변화를 줄 함수] = useState(원하는 요소) 를 사용하면 'Destructuring' 이라는 기술로 useState 가 길이 2 짜리 배열을 반환한다는 것에 착안하여, state 에 원하는 요소를 주고 바로 변화를 줄 수 있다!
  • 이때 '원하는요소' 를 직접 변경하지 말자. 참조형 타입이라서 주소만 가져가 버린다.
    　진짜로 변경 할 때는, 새로운 변수를 하나 선언하고 그것에 할당하여 변경 해야 한다.([...원하는요소]) 로 rest 써서
    　배열에서 뽑은 다음에 다시 배열에 넣어주는 일종의 '테크닉'을 사용할 수 있다!

state = { //state 는 항상 객체로 만든다. 딴거면 못 읽지롱
  number : 0 // 이렇게 0 이라는 시작점 값을 하나 고정시켰다. 
}

handleIncrease = () => { //화살표 함수를 안 쓰면 함수들 내부에서 this를 사용할 수 없게 된다.
    this.setState({
        number: this.state.number + 1
    })
} //아래에 버튼과 함께 onClick 이벤트를 넣고 {this.handleIncrease} 로 호출해 사용한다.

node 버전 때문에 시간을 한참 날렸다...결국 이런일이 발생했다. 너무 당황해서 인가, 하루종일 똑바로 공부하지 못 한 느낌이다. 어쩔수 없다.
모르면 맞아야지...흑흑
React 는 하루만에 끝낼 양은 아니다. 그리고 이론을 알아도 못 쓰겠다. 실습 연습이 많이많이많이 필요해 보인다.