FrontEnd/React (6) 썸네일형 리스트형 리액트 컴포넌트 만들기 [덧붙이기] 이전의 리액트 포스트에서 컴포넌트를 만드는 방법을 포스팅 하였습니다. https://ktw2408.tistory.com/29 리액트의 컴포넌트 만들기 왼쪽의 html 코드를 js 코드로 바꾸는 과정은 다음과 같이 진행합니다. 1. 컴포넌트를 만들겠다는 클래스를 선언한다. - App.js의 5번 줄의 class Subject extends Component 보면 Subject라는 클래스를 만들겠다 ktw2408.tistory.com 이에 앞서 컴포넌트가 무엇이고 어디에 쓰이는지에 대해 포스팅 해보도록하겠습니다. 먼저 컴포넌트는 사전적 의미로 "요소" 입니다. 이 요소들의 간략한 예시로는 기계를 구성하는 부품이나 해당 기계에서만 동작하도록 제작된 것으로 부터 범용의 기계요소를 포함하는 것 전자기기, 전자제품.. 리액트의 컴포넌트 만들기 왼쪽의 html 코드를 js 코드로 바꾸는 과정은 다음과 같이 진행합니다. 1. 컴포넌트를 만들겠다는 클래스를 선언한다. - App.js의 5번 줄의 class Subject extends Component 보면 Subject라는 클래스를 만들겠다는 선언을 합니다. - 선언할 컴포넌트 이름은 대문자로 작성합니다. (Subject가 컴포넌트 이름) 2. render 함수를 선언한다. - 원래는 함수 선언 할 때는 function으로 선언하는데 자바스크립트 최신 문법에서는 function을 생략합니다. 3. return 안에는 최상위 태그로 시작해야 합니다. - 이 최상위 태그이므로 에서 시작을한다. 아래의 App 컴포넌트는 태그가 최상위 이므로 하나의 태그만을 리턴한다. 즉, 현재 작성한 구문에서 리턴을 .. 리액트에서의 코딩과 배포 리액트에서 코딩과 배포를 하기 위해서는 먼저 디렉터리 구조를 살펴 봅니다. 1. 자바스크립트 먼저 public 폴더를 살펴보면 index.html 파일이 있습니다. 이 html파일은 리액트 앱을 실행하였을 때 나오는 첫 화면을 말합니다. index.html 파일의 코드 중 가 있는데 이는 id가 "root"인 div 요소에 들어가게 약속을 한 것입니다. 이를 개발자 도구로 확인해 보면 id가 "root"인 태그를 확인 할 수 있습니다. 이를 수정하는 방법으로는 src 디렉터리에서 작업을 합니다. index.js는 앱의 진입점 역할을 합니다. 코드를 살펴보면 11번 줄의 document.getElementById('root')는 id가 root인 자바스크립트의 선택자 문법을 의미합니다. 9번 줄의 는 컴포.. 리액트 웹 실행 시키기 앞서 리액트 설치 과정까지 완료하였다면 이제 리액트의 기본 웹앱을 실행을 시켜봅시다. (이전에 포스팅한 설치 방법을 링크해두었습니다.) https://ktw2408.tistory.com/3?category=950829 React 의 간단 개념과 설치 방법 React는 유저 인터페이스를 구현을 위한 선언적이고 유연한 JavaScript 라이브러리라고 불려지며 페이스북에서 개발하였습니다. 또한 React는 프론트엔드 개발자 사이에서 Angular, Vue와 더불어 많이 ktw2408.tistory.com VS CODE를 실행시킨 뒤 탐색기 화면을 보면 react-app 폴더 안에는 여러가지 폴더와 파일이 있습니다. (build 폴더의 경우 처음에는 생성되지 않습니다.) 모든 개발 환경이 갖추어졌으면 터미널에.. 리액트 관련 도구 [React Developer Tools] 구글 크롬에서는 리액트에 관련한 툴 프로그램이 있습니다. 프로그램 이름은 React Developer Tools입니다. 이 프로그램은 페이스북에서 제작을 하였고 크롬 웹 스토어에서 검색하여 설치 후 사용이 가능합니다. 바로가기 : chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision f160547f47 on 12/4/2020. chrome.google.com 설치 완료 후 개발자도구를 보면 기능이 추가됨을 알 수 있습니다.. React 의 간단 개념과 설치 방법 React는 유저 인터페이스를 구현을 위한 선언적이고 유연한 JavaScript 라이브러리라고 불려지며 페이스북에서 개발하였습니다. 또한 React는 프론트엔드 개발자 사이에서 Angular, Vue와 더불어 많이 사용하고 있는 프로그램이기도 합니다. 실제로 React 공식 홈페이지에는 React를 입문하려는 사용자를 위한 문서와 자습서를 무료로 제공하고 있으며 저도 React 공부하는데 참고하게 되었습니다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트 설치 방법은 다음과 같습니다. 1. node와 npm 버.. 이전 1 다음
