React

✅ 운영체제 : Windows 1. Node.js 와 npm 설치 Node.js(JavaScript runtime) 자바스크립트로 네트워크 애플리케이션 개발해주는 환경 npm(node package manager) Node.js의 패키지를 관리할 수 있는 도구

React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다.javaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 특정 DOM을 선택한 뒤, 특정 이벤트가

초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 완료해놓은 틀이라고 보면 된다.ㅤWebpack은 리액트 프로젝트에서 사용되는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들러이며, Babel은 프로젝트에서 JSX 문법을 사용할 수

✏ React에서 자주 사용하게될 JSX에 대해 알아보려고 한다. 1. JSX란? A syntax extension to JavaScript(=자바스크립트의 확장 문법) > JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다

Chapter_03이라는 폴더를 만들고, 폴더 안에 Book.jsx, Library.jsx 파일을 생성한다.사진과 같이 Book이라는 이름의 리액트 함수 컴포넌트를 만든다.Book컴포넌트는 props로 name과 numOfPage를 받아서 출력하는 컴포넌트이다.✔ JS

⭐ 중요한 부분이니 완벽히 이해하고 넘어가자! 🎯 컴포넌트란(Coponent)? 컴포넌트는 독립적이고 재사용이 가능한 UI를 만들수 있는 단위 이다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한

⬜ HTML ⬜ JS ⚡ 출력화면 !codepen[heewonkimm/embed/YzORveY?default-tab=js%2Cresult]

📌인프런 처음 만난 리액트(React)강의를 듣고 따라한 실습 기록입니다. 이전에 만들었던 파일을 사용해 아주 아주 간단한 시계를 만들어 보려한다! 1. 지난 실습과 같이 src에 chapter_04라는 폴더를 만든 후, Clock.jsk 파일을 생성한다. 2.

⭐ Read Only : 읽기 전용 -> 값을 변경할 수 없다. 다른 Props의 값으로 엘리먼트를 생성하기 위해선? -> 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성 > 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줄 것! 🟩 Props 사용법 > Props: 컴포넌트에 전...

리액트에서 컴포넌트는 크게 Function Component(함수 컴포넌트)와 Class Component(클래스 컴포넌트)로 나뉜다. 예전에는 클래스 컴포넌트를 사용했는데 최근에는 함수 컴포넌트를 개선해서 주로 사용한다고 한다. 1. Function Component(함수 컴포넌트) Welcome이라는 이름을 가진 함수로, 하나의 props 객체를 ...

1. Component 합성이란? 여러개의 컴포넌트를 합쳐서 하나의 컴포넌트로 만드는 것 💡 리액트에서는 컴포넌트 안에 또 다른 컴포넌트를 쓸 수 있음 -> 복잡한 화면을 여러 개의 컴포넌트로 나눠서 구현 가능! 🔆 예제 코드 App 컴포넌트는 Welcome

지금까지 배운 내용을 토대로 댓글 컴포넌트를 만들어보려 한다. 1. .jsx 파일 생성 Comment라는 이름의 리액트 함수 컴포넌트와 CommentList라는 이름의 리액트 함수 컴포넌트 생성 2. 만든 CommentList 컴포넌트를 실제 화면에 렌더링하기 위해 index.jsx 작성 3. Comment.jsx가 댓글창처럼 보이도록 Css 추가 ...

💡return() 안에는 병렬로 태그 2개 이상 기입 금지let post = '\~~'이런식으로 변수에 데이터를 저장할 수도 있지만, 리액트에선 변수 말고 state를 만들어서 데이터를 저장 해둘수 있다.맨 윗줄에 import { useState } from 'rea