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