다른

리엑트는 사용자 정의 태그를 만드는 언어다. 사용자 정의 태그를 리엑트에서는 컴포넌트 라고 부른다. 리엑트를 사용하는 것은 결국 컴포넌트를 만들고 사용할 줄 알아야 하는 것이다. 그럼 컴포넌트를 만들고 활용해 보자. App.js 의 내용을 위와같이 수정해보았다. 4~8라인의 funciotn Header 부분이 사용자 정의 테그를 정의한 것이다. 사용자 정의 테그를 만들때에는 함수 명칭의 첫 글자를 무조건 대문자로 해야 한다. 13라인의 부분이 위에서 정의한 Header 컴포넌트를 적용한 부분이다. 컴포넌트 명칭을 HTML 태그처럼 적어주기만 하면 바로 화면에 적용되는걸 볼 수 있다. 그러면 사용자 정의 태그를 좀 더 만들어보자. 위에서는 Header 부분을 만들었으므로 아래에서는 nav와 article ..

저번 시간에 create-react-app 설치를 끝내고 마지막에 설치 완료가 되었는지 확인하는 차원에서 실행했던 그 화면이 어떻게 나왔나 가볍게 살펴보자. 1. 수정 create-react-app 의 구조를 살펴보면 (좌측 폴더 트리) 프로젝트 명 아래에 여러 폴더가 있고, 그 중 src 폴더를 보면.. index.js 파일이 있다. 이 파일이 프로그램이 시작되면 자동으로 실행되는 파일로써 프로그램의 입구 라고 보면 된다. index.js 파일의 소스를 보면, 9라인에 라는 테그가 보이는데 이 테그는 4라인데 있는 import App from './App'; 라고 보면 된다. 이걸 하나씩 풀어보면 다음과 같다. import : 다른 경로의 파일이나 내부 함수등을 참조할 때 사용하는 명령어 App : i..

* React 공부를 위해 생활코딩의 강좌를 따라하면서 포스팅 하는 것 뿐이니 자세한건 생활코딩(https://www.youtube.com/c/생활코딩1)을 참고하시라. 시작하기에 앞서 React 란?? - 페이스북(현 meta)에서 개발한 javascript library. - 사용자 인터페이스 개발용 라이브러리. - 웹 뿐만 아니라 모바일, 가상현실 앱 등을 만들수 있다고 함. 사전 지식 - javascript library 이므로 당연히 javascript를 사용할 줄 알아야 함 - HTML, CSS 등의 기본 지식이 있어야 함. 내 개발환경 - 운영체제 : Windown10 - 개발 툴 : Visual Studio Code (Mac 에도 Visual Studio Code 가 있으므로 운영체제 상관..