🌱     What I learned Today :)

  ⭐️  React
     - JSX
     - Component
     - state & props
     - Life Cycle

React란

페이스북에서 만든 자바스크립트 라이브러리로, 페이스북을 더 편하게 개발 및 업데이트를 하고자 만들었다고 한다. React는 JavaScript와 DOM을 적절하게 섞어 사용하는 jsx라는 언어로 구성이 되어있고, 하나의 컴포넌트(Component)들이 모여 하나의 웹을 이룬다. 이러한 React는 완벽히 프론트-엔드 개발자를 위한 라이브러리이며, 프론트앤드 개발자들 사이에서는 이미 명성이 자자하다고 한다.

1. jsx의 특징

JSX
  리액트에서 JSX의 사용이 필수는 아니지만, Javascript 코드 안에서 UI관련 작업을 할 때 시각적으로 도움이 되며, 리액트가 더욱 도움이 되는 에러 및 경고 메세지를 표시할 수 있게 해준다고 한다.
즉, JSX 사용은 필수는 아니지만
JSX는 가독성이 높아지면서 효율적으로 작업이 가능하다.
아래에서 JSX의 특징을 살펴보도록 하자.

📌  언뜻보면 HTML처럼 보일 수 있지만 자바스크립트의 확장 문법이다.

<header className='App-container'>...</header>

📌  반드시 하나의 엘리먼트로 감싸야 한다.
별 것 아닌 것처럼 보이지만 이렇게 안해주면 에러난다.

[올바른 예제] ----> O

<div>
  <div>
    <h1>hello</h1>
  </div>

  <div>
    <h1>John</h1>
  </div>
</div> 


------

[잘못된 예제] ----> X

  <div>
    <h1>hello</h1>
  </div>

  <div>
    <h1>John</h1>
  </div>

📌  JavaScript 를 적용할 땐 { } 안에 작성한다.

class App extends Component {
  render() {
    const name = 'Potter'
    return (
      <div>
        hello {name}!  // hello Potter!
      </div>
    );
  }
}

📌  JSX 내부 에서는 if문 사용할 수 없다

--> 삼항연산자 사용 or IIFE 사용
--> JSX 외부에서는 if문 사용 가능

[예제]
  <div>
    {
      (1 + 1) === 2 ? (<h1>정답</h1>):(<h1>탈락</h1>) 
    }
  </div>

📌  Element의 클래스 이름을 적용할 때 "className" 사용

  [올바른 예제]

<div className="apple">Hello Potter</div>

  [잘못된 예제]

<div class="No">no!!!</div>  --> 일반 js와는 다르니 꼭 주의할 것!

2. Component

[컴포넌트]

 * 독립적인 단위 모듈
 * 재사용성 O
 * 직관적 O
 * 함수형 컴포넌트
 * Class형 컴포넌트

컴포넌트(component) 는 하나의 의미를 가진 독립적인 단위 모듈 이라고 정의가 된다. 위에서 언급했듯이 이 독립적이 단위 모듈이 하나 둘 모이고 모인 이 컴포넌트들로 customize하여 하나의 웹페이지가 만들어지게 된다. 그리고 독립적인 모듈이라 하나의 컴포넌트를 만들면 다른 곳에도 물론 재사용이 가능해지고,
이러한 컴포넌트가 어떤 역할을 하고 있는지, 혹은 어느 역할을 하고 있는 컴포넌트들이 모여있는지 한번에 알아차릴 수 있는 직관성을 가지고 있다.

아래 사진을 보면서 다시 설명하자면

컴포넌트는 그냥 하나의 함수라고 볼 수 있고,
리턴을 element로 해주는 것을 볼 수 있다.
즉, 컴포넌트는 일종의 파일 단위로 모듈화 시키는 것이다. --> export default App으로 재사용 가능

컴포넌트는 함수형과 class형 총 두가지의 종류로 나뉜다.
아래에서 간단히 살펴보자

함수형 컴포넌트

이름 그대로 함수를 선언한 후 jsx 언어로 컴포넌트를 구성하는 것이다.
이 함수형 컴포넌트는 class형 컴포넌트보다 사용범위가 적어 보통 '상태 변화'에 사용하는데에는 매우 제한적이라 state에 업데이트(상태변화)보단 기본적인 구성을 이룬 컴포넌트에 사용한다.

  function Potter() {
    return (
      <div>
        Potter is awesome
      </div>
    );
  }

class형 컴포넌트

이 또한 이름 그대로 class를 사용하여 만들어진 컴포넌트이다. 함수형이 아님에 눈을 여겨보자.
class형 컴포넌트 같은 경우는 함수형 컴포넌트와 같이 사용이 가능하며
또한 함수형 컴포넌트보다 한 단계 더 나아가 state업데이트 (상태변화)가 가능하다.
문법 구성은 아래와 같다.

  class Potter extends React.Component {
    render() {
      
      return(
        <div>
          Potter is awesome
        </div>
      )
    }
  }

위의 코드는 일반적인 함수형 컴포넌트와 동일한 기능을 한다.
주의해야할 점은 반드시 render()을 기입하고 그 안에 return()을 해줘야한다는 것이다. (본인은 계속 return을 빼먹는 실수를 연발에 err를 자주 접하고 있다..)

Tip) 🌟🌟

• class 컴포넌트를 사용시 클래스 명의 (Potter) 첫 알파벳은 대문자로 쓰기로 약속되어져 있다. 또한 이 클래스를 타 상위 컴포넌트에서 사용하고자 하거나 링킹을 하고싶을 땐 그 상위 컴포넌트의 render() { return (여기에 작성) } 즉, "여기에 작성" 부분에 class 이름으로 만든 <Potter></Potter> 혹은 <Potter />라는 태그를 넣어주면 끝!
• 와 같은 태그에 클래스명을 지정하고 싶을 때 camelCase를 사용

<div class = ''>  --> X
<div className= ''> --> O
  
<div id=''>  ---> O // 이건 그냥 가능.

또한 class 컴포넌트는 state 업데이트를 가능하게 한다.
아래 코드와 같다.

  class Potter extends React.Component {
    constructor(props) {
    super(props)
    this.state = {} // 초기 상태값을 삽입
    }
    
    render() {
      return ()
    }
  }

위의 코드로 twittler 스프린트를 진행해봤다. 이에 대해 다음 포스트에서 작성하도록 하겠다.

하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴 가능?

<React.Fragment></React.Fragment>안에 감싸주거나
단축 문법으로 <></>로 감싸주거나 혹은 <div>와 같은 태그들 안에 감싸주면 가능하다. 

단축문법<></>을 사용시 Key를 입력해줘야한다면
<React.Fragment></React.Fragment>로 정확하게 써줘야 한다.

3. state & props

사실 이 놈들 때문에 리액트 twittler & recast 를 구현하는데 많이 애를 먹었다.
"그래서 이게 뭔데??"라는 짜증을 많이 유발한 녀석들이다.

우선 공식문서부터 보고오자!
리액트는 공식문서를 백 번 천 번봐도 부족하지 않다는게 과언이 아니니까 꼭 보자! https://ko.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props

state
state는 흔히 상태값이라고 한다.
상태라는 것은 우리가 밥을 안먹으면 배고픈 상태, 밥을 먹으면 배부른 상태, 졸린 상태 등등이 실시간으로 변하고 업데이트되는 것처럼 상태값이 변할 수 있다.
초기값으로 어떠한 값이 state에 설정이 되어 있다고 하더라도
setSate()라는 것으로 언제든 변할 수 있다.
그리고 이 state에 따라 props에게 영향을 미치게 된다.

props
props는 속성, attribute로 단순히 읽기 전용이며 변하지 않는다.
단지 props는 상위 컴포넌트로부터 state값을 전달받아 본인 컴포넌트에 사용된다.

또한 props 사용시 주의해야할 엄격한 규칙이 있다.
props는 수정이 불가능한 읽기 전용인데,
함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안되며, 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

tip) props를 변경하고자 하면 -> state를 변경하고 props는 그대로 냅둔다. 당연히 state는 state를 가지고 있는 상위 컴포넌트에서 수정을 해야한다.

순수함수 - 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문이다. imutable함수
function sum(a, b) {
  return a + b;
}

순수함수x - 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.
function sum(account, amount) {
  account.total -= amount;
}

음.. 사실 나도 처음 여러 블로그와 공식문서를 많이 봤지만 단번에 이해하지는 못했다. 뭐.. 지금도 그런 것 같기도 하고..
쉽게 하나의 나만의 예제를 만들어 쉽게 생각하며 접근해보도록 하자.

state는 대법원의 양형기준이고
props는 그 양형기준을 토대로 판사들이 판결하는 것과 같다고나 할까..

대법원은 최상위 법원으로 양형기준을 세우는 곳이고 이 기준들은 언제든 변할 수 있으나, 한 번 정해진 양형기준을 하위 법원 판사들이 감히 변경할 수 없고 그대로 기준을 따라 양형을 때릴 수 밖에 없으니 말이다.

음.. 더 나를 이해시킬만한 예제가 아직 마땅히 떠오르지는 않네..

그냥 손코딩이 최고다.
다음 포스트 twittler와 recast에서 간략하게나마 다뤄보던가 해야겠다.

4. Life Cycle

메소드등 recast 정리 후 업데이트 예정

🌱     Potter's thought :)

어렵다.
어렵다.
어렵다.
어렵다.
그래도 배우고 나니 재미있는 건 사실이다.
이런게 코딩의 매력이 아닌가 싶다.

리액트.. 알면 알 수록 편해지고 더 알아가보고 싶은 녀석이다.
내일 Twittler & Reacast 스프린트 진행했던 것을 다시 복기를 하면서 React와 더 친해지는 시간을 가져봐야겠다.

끝.

React [2편] - Recast: YouTube 클로닝 바로가기 클릭!