Today, I Learned

• About React :

  - 리액트를 실험(?) 혹은 연습해볼 수 있는 사이트 : CodePen, CodeSandbox, Glitch, or Stackblitz.
  - 리액트는 html파일에 script 태그를 통해, react, reactDOM, babel을 import해오고, text/babel 타입 태그를 통해
  클래스 혹은 자바스크립트 함수 형태로 컴포넌트를 만들어서 렌더 해줄 수 있지만, 이 방법은 페이스북에서 제공하는 'create-react-app'에 비하여 비효율적이다.
  따라서, 주니어 개발자부터, 큰 프로젝트를 담당하는 개발자까지 다양한 층이 create-react-app을 쓸 수 있다. 
  - react로 만들어진 웹 사이트의 컴포넌트 등을 확인할 수 있는 'React DevTools for Chrome' 을 이용하면 좋다(설치 후에 개발자 도구를 통해 이용할 수 있음)
  - JSX = Javascript + HTML// 형태는 HTML과 유사하지만, js에 더욱 가까운 것으로, 몇가지 규칙이 있다. 
    1) class는 자바스크립트에서는(ES6) 클래스 키워드이기에 html에서 클래스명을 정해줄 때는 className을 써야한다.
    2) 메서드는 카멜케이스로! 예를 들어, onclick은 onClick으로
    3) self-closing 태그는 본래 필수적으로 닫지 않아도 됐지만, 여기서는 필수로 닫아줘야함 
  - JSX 내에서 자바스크립트 expression을 쓰려면, {}(curly braces) 안에 써주면 됨.(이건 django랑 유사한듯) 
  - simple component vs class components : class에서 React.Component 를 상속받아서 컴포넌트를 만들던지, simple component, 
  즉, 자바스크립트의 함수와 유사한 형태로 만드는 컴퍼넌트를 쓰는지는 자유지만, 후자가 많이 쓰이고 유용하다.
  # 둘의 차이 ? : simple components는 render() {} 안에 리턴문을 쓰지 않고, 바로 return문을 씀. 
  ** return 문을 쓸 때, 한 줄을 넘어가면 두 경우 모두 ()소괄호로 감싸줘야함(공통적으로)
  - props(property)를 통해 컴포넌트 간에 데이터를 보내고, 받아 쓸 수 있다. 그러나, 포인트는 props는 read-only 데이터로 컴포넌트 내에서 수정을 가해서는 안된다.
  - state란? => props와 유사하지만, component 내에서 컨트롤이 가능한(props처럼 read-only가 아님) 
  

Planning to Study

• react twittler 구현 : form을 보내서, 보낸 자료를 state에 추가하고, 추가한 것을 실제 화면단에도 추가하는 로직을 만들어보기(추가할 때마다 렌더링 되도록)