반응형 Programming/React10 [생활코딩] React 04. 속성 props html 태그를 보자. 라는 태그 안에 사진파일 / 넓이 / 높이 등의 속성을 설정할 수 있도록 할 수 있다. React 에서도 이러한 속성을 "PROP"라고 한다. 아래의 소스를 기준으로 props를 React에서 어떻게 활용하는 지 알아보자 태그의 속성 처럼 우리도 , , 태그에 props을 부여하여 커스텀을 해보겠다. , , 태그의 정의 되어 있는 부분이 아닌 app()에서 본문을 출력하는 내용에서 글 내용을 변경하려고 하면 다음과 같다. function app()에서 어떤 내용을 넣고 싶은지 부터 살펴보면 이와 같이 title속성과 body속성을 추가하여 내용을 app() 출력 시 변경해보려고 한다. 단순히 이렇게만 하면 변경되지 않는다. 추가적으로 우리가 정의한 , 태그를 속성이 적용되도록 수정.. 2024. 1. 22. [생활코딩] React 강의 03. 컴포넌트 만들기 리액트의 본질 리액트는 사용자 정의 태그를 만드는 기술 아래와 같이 app.js를 변경해 보았다. 여기서 만약 태그의 내용이 엄청나게 길어진다고 상상해보자. 그러면 소스를 보기에 매우 불편해지 때문에 태그를 사용자 정의하여 간단하게 줄여보도록 해보자. 사용자 정의 태그를 만들 때는 함수를 정의하면 된다. React 에서는 사용자 정의 태그를 생성할 때 무조건 대문자로 시작해야 함. (ex. function header ==> x // function Header == O) React에서는 사용자 정의 태그를 컴포넌트 (component)라고 부른다. 이제 밑에 , 태그도 한 번 컴포넌트로 만들어 보자. 이런식으로 정리 할 수 있다. 2024. 1. 21. [생활코딩] React 강의 02. 소스코드 수정/배포 index.js를 F5 하면 REACT 관련 화면이 실행됨 1) 빌드 만들기 빌드 버전을 만드려면 터미널을 다시 실행한 다음에 컨트롤 C 눌러서 기존에 켜져있었던 개발환경을 종료함 그 다음 터미널 화면에 npm run build 를 치면 배포판을 만드는 과정이 실행됨 빌드가 다되면 옆 탐색기에 bulid 폴더가 생성이 된 것을 볼 수가 있음 2) 빌드한 소스를 서비스 하기 이제 빌드한 결과물을 서비스 해보자 터미널 명령어는 npx serve -s build 라고 치면 된다. serve는 웹 서버를 뜻하는데 -s 라는 옵션을 주게 되면 사용자가 어떤 경로로 들어와도 index.html 폴더를 서비스 해주게 된다. 뒤의 build 는 폴더 이름으로 빌드 만들면서 생성된 build폴더를 뜻한다. 터미널에서 결.. 2024. 1. 20. [생활코딩] React 강의_01_실습환경구축 1. 리액트 홈페이지 접속 https://ko.reactjs.org > 시작하기 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리A JavaScript library for building user interfacesko.legacy.reactjs.org2. 실습환경구축을 하기 싫다면 본문 내용 중 "온라인 플레이 그라운드" 의 Stackblitz를 클릭하면바로 실습할 수 있도록 리액트 환경이 구축되어 있음 3. 그게 아니라면 해당 홈페이지 오른쪽에 "새로운 React 앱 만들기" 클릭 후 "추천 툴체인" 소제목을 찾아라 4. 필자는 강의 내용에 따라 "Create React App"를 선택한 후 본문 내용에 또 "Create React App" 선택 5. github에 이동.. 2024. 1. 16. 이전 1 2 다음 반응형
