만들면서 배우는 react : 기초 - 1

react 공부를 시작한다는 게시글을 정말 여러번 남겼던 것 같은데….
그렇다.. 다시 시작이다;;;
이번에는 인프런에서 진유림님의 react 강의를 구매해서 듣기 시작했다.
그래도 시작이 반이라고 하니까 긍정적으로 생각하자…!!!
이번에는 끝까지 들을 수 있기를!

---

자, 우선 react를 시작하기 전에 스크립트를 추가해야 한다!
참고사이트
위 페이지로 가면 추가해야할 스크립트가 있다.
걔네를 넣고, babel도 넣어준다.
그럼 일단 준비는 끝!!

우리는 왜 JS가 아니라 react를 사용할까?
기술이 점점 발달하면서, 개발해야하는 기능들이 많아지고 다양해졌다.
그런데 vanila JS로 그것들을 모두 개발하기에는 생각보다 양이 너무 많고, 절차가 많아진다.
한마디로 몸과 머리가 고생한다는 것 ;_;
아래의 JS 코드를 참고해보잡

// 4. 고양이 사진을 추가할 곳 찾기
const favorites = document.querySelector(".favorites");

// 5. 새로운 고양이 사진 만들기
const newFavoriteImage = document.createElement("img");
newFavoriteImage.src = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";

// 6. 고양이 사진을 감싸는 li태그 만들기
const li = document.createElement("li");

// 7. li태그에 고양이 사진 넣기
li.appendChild(newFavoriteImage);

// 8. 방금 만든 요소 넣기
favorites.appendChild(li);

고양이 사진을 만들고, 그 사진을 요소에 추가하기 위해서는 저만큼의 과정이 필요하다.
코드가 복잡하진 않지만, 절차가 많다. (기능이 복잡해지면 저 절차가 얼마나 더 복잡해질지 생각해보면 벌써 머리가 아파온다 ㅎㅎ)
그런데 저걸 react로 구현한다면…!!!!

// 고양이 사진을 감싸는 <li> 태그 만들고, 고양이 사진 넣기
const catItem = (
      <li>
        <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
      </li>
    );

// 고양이 사진을 추가할 곳 찾기
const here = document.querySelector('#app');

//방금 만든 요소 넣기!
ReactDOM.render(catItem, here);

이렇게 간단하게 끝나게 된다.
필요한 절차가 확 줄어든 것을 볼 수가 있을 것이다 +_+