TIL - React를 시작하기 전에(1~5)

✔ JSX는 무엇인가?

const element = <h1>Hello, world!</h1>;

위의 태그 문법은 HTML도 아니고, 문자열도 아니다. 자바스크립트를 확장시킨 JSX라는 것이다.(아직은 내가 배우기 전이니 React.js를 쓰기 위해 사용하는 문법정도라고 생각해 두려고 한다...)

✔ JSX가 가진 특징은 무엇인가?

• JSX element(요소)

  HTML문법을 JavaScript코드 내부에 써주며 이녀석은 변수에도 저장이 되고, 함수의 인자로도 넘길 수 있다고 한다. 아래는 예시를 보여준다.

const hi = <p>Hi</p>;
const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

• JSX attribute(속성)

  (1) 태그에 속성을 주는 방법도 다르다. 속성을 선물하고 싶다면 "" 쌍따옴표를 꼭 기억하자.(받는사람에게 욕을 안먹으려면, 주는사람이 더 신경을 써야되는건 선물과 같다.)
  
  (2) HTML의 attribute의 name(속성명)과 다를 수 있다.
  예 ) HTML = class , JSX = className

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className = “프로그래밍”>programming</li>
};

• Self-closing Tag

  JSX는 어떤 태그라도 Self-closing Tag가 가능하다.

  <div /> === <div></div>

• Nested JSX

  (1) 소괄호로 감싸기(필수) : 중첩된 요소를 만드려면 ()(소괄호)를 사용하여 감싸주어야 한다.
  (2) 항상 하나의 태그로 시작한다. 첫 요소는 하나의 태그로 감싸는 것이 필수

const welcome = (
    <div>
      <h1>hi</h1>
      <h1>hello</h1>
    </div>
    );

• Rendering

  html요소(element) , 또는 React 요소 동의 코드가 눈으로 볼 수 있도록 그려지는것. React 요소가 렌더되려면 ReactDom.render 함수를 사용한다.

  ReactDOM.render(
  <h1>Hello, world!</h1>,---> (JSX React요소)
  document.getElementById('root’) ---> (렌더하고 싶은 container- 부모요소)
);

✔ Component & Props

• Component

  (1) 재사용 가능한 UI단위(컴포넌트를 하나만 만들어서 재사용하면 정보가 변경될 때 css만 수정하면 되기 때문에 유지보수에 유리하다고 한다.)
  (예시) 인스타그램 클론코딩에서 input 태그(아이디, 비밀번호, 회원가입 등에서 필요한것들)
  
  (2) 함수와 같이 독립적이고 재사용 가능하며, input(=props)을 받아 return(=화면에 보일 React요소)한다.

• Component 만들기

(1) 함수로 구현하기

function Welcome(props) {
Return <h1>Hello, {props.name}</h1>
}

(2) class로 구현하기

class Welcome extends React.Component{
  render() {
   Return <h1>Hello, {this.props.name}</h1>;
}
}

✔ extend를 해서 생성하며, render() 메서드는 무조건 정의해야 하고, return도 해줘야함.

• Component 이용해보기

<--함수로 구현한 웰컴 컴포넌트-->
function Welcome(props) {
Return <h1>Hello, {props.name}</h1>
}
<--App컴포넌트의 정의에 사용한 웰컴 컴포넌트-->
function App(){
  Return (
	<div>
	  <Welcome name = “Sara” />
	  <Welcome name = “아무개” />
	  <Welcome name = “개똥이” />
	</div>
		);
}
<-- 화면에 리액트 요소 그려주기(정의해둔 App컴포넌트를 그림) -->
ReactDOM.render(
<App />, 
document.getElementById(‘root)
); 

✔ 체크포인트
(1) App 컴포넌트를 정의할 때, '<"welcome /" >의 형태로 가져왔음
(2) 화면에 요소를 그릴 때에도 '<"App /">'의 형태로 쓰임
(3) 결과값 : 헬로 사라/ 헬로 아무개/ 헬로 개똥이

✔ Component의 States

• State

  컴포넌트의 상태 값이며, state 와 props는 둘 다 object이고, 화면에서 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.

• State와 props의 차이

  State : 컴포넌트 내에서 정의하고 사용
  Props : 사용하는 부모쪽에서 전달해서 사용(= parameter처럼)

✔ 오늘의 간단회고

오늘도 역시나 새로운 배움이어서 혼자 미리 예습을 하기엔 어려움이 있었다.
하지만 몇몇 내용들은 혼자서도 충분히 이해하고 적용해볼 수 있을거 같다는 자신감도 들었다.
내일 세션을 통해 React에 대해서 배움을 얻을 수 있겠지만, 오늘 집에 가는 지하철에서 유튜브를 통해 생활코딩이나 코딩애플 강의 영상을 한 번 봐야겠다.
오늘보다 발전하는 내일의 나를 위해 노력하자. 오늘은 여기까지!👋