본문 바로가기

반응형

Reactjs

<Reactjs> 첫번째 컴포넌트 만들기 프로젝트를 성공적으로 생성하였으면 "컴포넌트"를 한번 만들어볼 것인데 본인도 지금 강의와 학원에서의 수업을 들으면서 나만의 개념으로 간단히 정의했을 때 "UI조각" 이라고 큰 틀의 개념으로 잡고 사용하고 있다.. 물론 이 컴포넌트가 class 와 fuction 두가지 방식으로 정의 할수 있고 props와 state를 가지고 있으며 그 둘은 변하지 않는 값과 어떤 걸 임포트 해주고 등의 자세한 개념도 탑재되어 있지만 크게 생각할 떄는 조각!! 이라고 보면 될 것 같다. 그럼 한번 같이 첫 컴포넌트를 생성하고 적용시켜보자 우선 위와 같이 Hello.js 라는 이름의 파일을 하나 만들어 준다. 그 안에서 리액트를 불러와서 쓸것이기 떄문에 import React 코드를 작성한뒤에 컴포넌트는 위에서도 잠시 언급했.. 더보기
<Reactjs> 프로젝트 만들기 리액트란 우선 간단히 무엇인지 알고 넘어가자 리액트는 페이스북에서 제공해주는 프론트엔드 "라이브러리" 이다. 또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 리액트를 왜 사용하는가? 사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다. 그러나 html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다.리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다. 어느정도 규모있는 프로젝트를 진행하다보면 위의 사진과 같이 복잡한 관계를 가지게 된다. 리액트는 업데이트가 필요한 UI를 메모리에 있는 가상의 돔에 뿌려준뒤 실제 브라우.. 더보기

반응형