[항해99] 리액트 입문

input태그 속성에 required 넣어주기select와 option 태그 사용하나만 선택되게 하고 싶은 input 태그 속성에 name을 같게 하면 하나만 선택하게 바꿀 수 있다!동그라미는 radio, 네모는 checkbox 속성이다!버튼을 누를 때 값이 없으면 처

리액트란 ? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리.SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던

ls cd 폴더이름 yarn create react-app week-1 1. vscode로 만든 프로젝트 열기2\. 새 터미널을 누르고 yart start 치고 엔터app.js의 App 컴포넌트 > div태그를 리턴하는 App함수일 뿐!

HTML을 품은 JS === JSX!👉 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html)👉 그럼 리액트에서 어떻게 뷰를 그릴까요? App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고

부모 컴포넌트로부터 받아온 데이터우리는 컴포넌트 간의 정보를 교류할 때 Props를 사용합니다. 다른 컴포넌트는 생략하고 Mother만 봅시다. 만약 Mother 컴포넌트가 가지고 있는 정보(값)를 Child에게 주고 싶을 때는 아래 코드와 같이 합니다. motherN

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 우리는 앞으로 useState 라는 함수를 이용해서 state를 만듭니다. useState 는 state를 만들어주는 리액트에서 제공하는 기능입니다. 그래서 리액트에만 존재하는 개념이자 기능입니다. 그리고

컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다.리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그

지난시간에는 코드를 이렇게 구현했었죠?하지만 이렇게 하는 것은 같은 코드가 여러 번 중복이 됩니다. 그리고 “감자", “고구마" 와 같은 이름들도 개발자가 직접 입력을 해줘야 하고, 데이터로서 관리가 되고 있지 않죠. 그리고 만약에 “토마토" 라는 항목이 추가되면 개발

우리는 지난 챕터에, <User /> 컴포넌트, <Button /> 컴포넌트의 관심사를 <App /> 컴포넌트에서 분리하고, 컴포넌트의 역할을 명확히 해주었기 때문에 <User /> 컴포넌트의 재사용성과 전체적인 가독성을 올릴 수 있었습니다.

Vercel은 AWS 와 같은 클라우트 컴퓨팅 서비스를 제공하는 회사이면서도, 서비스의 이름이기도 합니다. 그리고 React의 Framework인 Next.js를 개발한 회사이기도 합니다. 우리가 Vercel을 선택한 이유는 아주 쉽고, 간단하며 성능도 괜찮고 일정 수

Goal : My Todo List 만들기지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다.이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨학습 과제를 끝내고 나면 할 수 있어요!컴포넌트와 리액트 훅 요소를 다룰 수 있어요.이벤트를 관리할