Today, I Learned

• 선언형 vs 명령형(절차형) 한번더 공부하기 : 참조 사이트
• 리액트(react)는 어제도 정리했지만, 자바스크립트 라이브러리로, 주요한 특징으로는 'User Interface(UI)' 를 Component 단위로 관리한다는 것이다. 그리고 이러한 컴포넌트는 encapsulated and can operate independently 한다(한글로 표현하면 캡슐화 등의 용어가 와닿지 않기에 영어로 생각하자).그래서 이러한 리액트 컴포넌트를 통한 UI설계는 복잡한(like in vanila JS)구성을 좀 더 심플하게 만들어준다(선언형).
• React에서의 몇가지 특징을 정리해보면, React에서는 이전에 DOM에서 썼던 onclick 등의 메서드를 쓸 때는 onClick 이런식으로 camelcased 형태로 써야한다(그냥 rule이다).
• State in React is for remembering things. 그리고 이러한 state는 class component 내에서는 constructor 내에 쓰거나, ES7 문법으로 단순히 state 형태로 써도된다. 이에 더하여, state는 수정을 할 때, state="something" 이런식으로 재할당해서는 안된다. setState(함수 or Object) 메서드를 써서 수정해야한다는 점 기억하기. 따라서, state에는 push 등을 쓰면 안됨. 이 때, 함수로 쓸 때는 리턴에 객체를 주면 된다. 이에 더하여,

  this.setState((state, props) => ({
    counter: state.counter + props.increment
  }));

  이런식으로도 쓸 수 있다는 것 기억하기
• Socrative 오답 정리
  • props.children을 쓰면, 상위 컴포넌트에서 컴포넌트 사이에 있는 값, html로 치면 textContent에 속하는 값을 받아올 수 있다.
  • props를 통해서 여러개의 변수를 받아올 수 있음. 변수로 생성한 만큼 props 객체에 해당 변수가 키로 들어간다는 것!
  • 왜 우리는 JSX를 쓰는가? => 누가봐도 훨씬 직관적임. DOM에 비해서
  • React는 JSX 없이는 안되는가? No! React.creatElement메서드를 통해서 할 수 있다. 그러나, 굳이..?
  • JSX는 어떻게 컴파일되는가? by Babel : 우리가 react app을 좀 더 편하게 구현하기 위해서 사용하는 페이스북이 제공하는 'create-react-app'을 설치할 때 babel이 같이 설치되고, 이러한 babel은 JSX를 우리가 이전에 쓰던 구형 문법으로(즉, 최신 문법을 구형 문법으로)컴파일해서 사용하게 해준다. 번역기 역할을 한다는 것이다.
  • return 해줄 때, 즉, 렌더링 해줄 때, 배열을 리턴해주고, 그 배열을 렌더링 해줄 수 있다. 이 때는 그 배열 속의 각각 요소들을 하나하나, 예를 들어, li를 모아놓은 배열을 ul 사이에서 리턴해주면 깔끔하게 ul 사이에 li들이 child요소로 append 된다. 이는 이전 스프린트에서 map을 이용해서 새로운 배열을 리턴하기만 해도 렌더링이 되었던 것을 생각해보면 간단하다.
  • React 내에서 두개의 html(정확히 말하면 JSX문법)태그를 리턴해서는 안된다. DOM에서 'createdocumentFragment'을 이용했던 것처럼 리액트에서도 div태그로 감싸줘도 되지만, <> </>로 감싸줘도 된다.
  • JSX 내에서는 if문 대신 삼항연산자를 써야한다(for문 대신 map을 써야하는 것도 마찬가지이다). 하지만, JSX내에서만 if문이 안되는 것이지 React 내의 다른 함수에서 if문을 못쓴다고는 생각하지 말기.
  • props 만의 rule : props를 다루는 함수들은 모두 '순수함수'여야 한다. 즉, props를 수정해서는 안된다. props를 이용해서 새로운 값을 얻고 싶을 때는 새로운 참조값을 리턴하는 slice or concat or [...props, another ] 식으로 써야한다.(**순수 함수 = 수정을 하지 않는 함수라고 생각)
  • Array 형태로 위에서 말한 것처럼 return 해주려면 반드시, key값을 설정해줘야한다. 이 때, key 값 설정은 map 함수 내에서 해줘야한다. 즉, map함수를 통해서 배열을 만드는 과정 속에서 정해줘야함. 이 때, map 메서드의 인덱스 파라미터를 받아서 key 값으로 해주는 것은 지양할 것.
  • render 안에서 setState를 사용하면 stackOverflow 에러 발생 => render 안에서 setState사용 no.. 이유는 좀 더 공부하면서 파악하기.
• map 메서드의 두번째 파라미터는 index 값이라는 것 remind
• Object도 spread syntax 적용이 가능함. 예를 들어,

  const props = {
    name : 'wali',
    age: 30
    }
    <Hello {...props} />
  // 이렇게 하면 Hello component에서
  //props.name 은 'wali'가 되고,
  //props.age 는 30이 됨.

• 한번 더 강조하는 리액트 국룰(?) : JSX 내에서는 {}를 통해서 js 코드를 사용하고, JSX문법으로 html 태그를 쓸 때에 만약 두 개 이상의 태그를 쓸거면 묶어주고, 소괄호로 감싸준다. + class로 컴포넌트를 생성할 때는 constructor(props) {super(props)} 형태를 꼭 써줘야함.
• props를 사용해서 데이터를 보내는 것이 나만의 비유로 표현해보면, TENET과 같다(나만의 비유 기억해두기).
• About State and Lifecycle (참조 사이트) :

  먼저, lifecycle이란 React가 컴포넌트의 리턴 값을 렌더링하는 순간 사람이 탄생하는 것처럼 탄생했다가(componentDidMount와 연결),
  사람처럼 살아가다가(setInterval을 통해서 state를 계속 바꾸는 것과 같은), 결국에 사람처럼 죽는다. 컴포넌트가 사라진다는 의미(componentWillUnmount와 연결). 
  이 때, 그 과정을 살펴보면, 먼저, Clock 컴포넌트를 ReactDOM에서 render()했을 때, constructor를 통해 생성이되고(그 안에 state도 생성이 됨), render()메서드가 실행되고(클래스 내에서), 
  ReactDOM이 실제로 렌더하는 순간, componentDidMount 함수가 실행되고, 그 안의 함수가 실행된다. 
  그 다음에 쭉 살아가다가(?), 컴포넌트가 제거되면 componentWillUnmount 함수가 실행됨. 
  이 때, 해당 클래스에 state를 설정해두었다면, state가 바뀔 때마다(값이) react가 그것을 캐치하여 다시 render()함.
  그래서 setInterval을 componentDidMount에 해놓으면 state 값이 바뀔 때마다 render()가 되면서 실제 화면에서 값이 바뀌는 것.
  

• setInterval => clearInterval로 예약(?) 정지 가능
• 각각의 컴포넌트 들은 캡슐화되어 있기 때문에 서로가 stateful 한지 stateless한지 모른다. props를 통해 데이터를 위에서 아래로(트리 구조를 생각) 흘려보내지만, 그것이 state인지는 모른다.