react17 [ReactJS] Create React App - ReactJS 로 영화 웹 서비스 만들기 (5) 본격적인 React 의 시작!! Create React App #5. Create React App Create React App 리액트 어플리케이션을 쉽게 만들 수 있게 해줌 많은 스크립트와 configuration 들이 도와줌 자동 새로고침, 즉각적인 CSS 포함 등의 기능 제공 CRA 실행 방법 1. nodeJS 설치 https://nodejs.org/en/ 에서 버전에 맞는 걸로 설치하기 2. nodeJS 설치 확인 cmd 에 node -v 실행 npx 도 확인 그럼 CRA 만들 준비 완료!! 3. Create-React-App 생성 cd C:\(사용할 폴더 주소) 명령어를 이용해 어플리케이션을 만들 폴더로 이동 npx create-react-app (사용할 app 이름) 자동으로 설치가 진행된다.. 2021. 11. 26. [ReactJS] Props - ReactJS 로 영화 웹 서비스 만들기 (4) 이번엔 props 를 이해하기 위해 버튼 컴포넌트를 이용한 실습을 해볼 것이다. #4. Props props 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 자식 컴포넌트의 첫 번째이자 유일한 인자 (argument) 이다. text, boolean, function, ... 등 어떤 형태로든 보낼 수 있다. Practice - (1) 여러 개의 버튼 만들기 function SaveBtn() { return ( Save Changes ) } function ConfirmBtn() { return ( Confirm ) } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.rende.. 2021. 11. 26. [ReactJS] Unit Converter 완성 - ReactJS 로 영화 웹 서비스 만들기 (3) KmToMiles Converter 를 구현하고 여러 개의 Converter 중 선택한 Converter 만 보여지도록 할 것이다. 이건 개인 과제로 주어진 것인데 이전 강의를 잘 수강했다면 무리없이 구현할 수 있다!! Unit Converter 구현하기 - (1) 컴포넌트 분리 MinutesToHours 함수 생성 지금까지 구현한 코드는 MinutesToHours 라는 함수를 따로 만들어서 분리 KmToMiles 함수 생성 실제 기능 구현 전, 함수만 만들어 뒀다. App() select 를 이용해 Converter 를 선택할 수 있게 함 어떤 index 를 선택했는지에 따라 다른 컴포넌트를 보여준다. index 와 onSelect index : 선택된 값을 가짐 onSelect : 선택된 값 (eve.. 2021. 11. 25. [ReactJS] State - ReactJS 로 영화 웹 서비스 만들기 (2) 이번엔 state 가 뭔지 배우면서 분(minutes) 시(hours) unit converter 를 만들 것이다. #3. State State 와 useState state : 기본적으로 데이터가 저장되는 곳 useState 는 [value, modifier] 를 제공 value : 값을 저장하는 변수 modifier : value 값 변경이 가능하며 (직접 다시 render 할 필요 없이) 자동으로 re-render 해준다. MinutesToHours Converter 구현하기 - (1) state 이용 state 생성 초기값은 0 이며 setMinutes 로 값 변경이 가능하다. onChange 함수 생성 event 값을 arg 로 받아서 현재 입력된 input 값이 무엇인지 확인할 수 있다 = e.. 2021. 11. 25. [ReactJS] Introduction & The Basics of React - ReactJS 로 영화 웹 서비스 만들기 (1) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React Fundamentals nomadcoders.co 이미 수강했던 강좌지만 이번에 2021년 기준으로 업데이트 됐다. 시간도 얼마 안걸리니까 개념도 다시 볼 겸 재수강 시작!! #1. Introduction ReactJS 를 사용해야하는 이유 - 넷플릭스, 에어비앤비 등 많은 유명 웹 사이트에서 사용 - 페이스북에서 개발하고 지원 -> 수명이 짧지 X - 대규모의 커뮤니티 (JS 와 함께) ReactJS 의 특징 - UI 를 interactive 하게 해줌 #2. The Basics of React ReactJS 사전 준비 - Vanilla .. 2021. 11. 24. 이전 1 2 3 다음
