React

React - 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환합니다(무상태 컴포넌트는 null을 반환합니다).App이라는 컴포넌트를 render()를 통해 아래의 코드 <div id="root"></div> 에 넣어줍니다. React

React에서는 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.위의 코드는 onClick의 객체로 lambda함수를 넣어서 Submit 버튼을 클릭했을 때 'hello'라는 문자가 뜨도록 하는 코드입니다. 'hello' alert주의!만약 위의 코드

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.기본 사용법useState()는 Hook의 함수들 중 하나입니다.

코드를 작성하다 보면 같은 기능을 여러 개 구현하고자 할 때 반복이 생깁니다. 각각 똑같은 기능을 하는 Click 버튼 세 개를 만들고자 할 때 같은 코드를 3번이나 중복해서 사용해야 합니다. 이를 컴포넌트를 사용하여 반복을 줄일 수 있습니다. <컴포넌트의 장점>

App 에서 사용되고 있는 Counter 컴포넌트가 자식 컴포넌트이고, App 컴포넌트는 부모 컴포넌트 입니다. 부모 컴포넌트 데이터 전달하기사용하고 있는 Counter 컴포넌트로 click이라는 데이터를 보내고자 할 때, click을 key로 사용하고 key에 대한

button을 누르면 True, False가 번갈아 화면에 보여주기⇒ toggle 함수는 setCondition 함수를 사용해 참 → 거짓, 거짓 → 참 으로 바꿔줍니다.⇒ useEffect는 렌더링 될 때 condition이 변경되면 실행합니다. ⇒ render

영화 정보 여러 개 올리기Movie list시리즈 별 영화 정보를 올리고 싶을 때 같은 문장을 반복해서 나열해서 사용하게 됩니다. 만약 예시처럼 4개가 아니라 무수히 많은 데이터를 사용하고자 할 때 매번 모든 문장을 다시 쓰기는 불가능합니다. 또한 많은 데이터를 관리할

영화 리스트에 항목 추가하기useState를 사용해서 movies 객체의 항목을 변경할 수 있도록 해줍니다. setMovies 함수를 사용해 event값을 입력받으면 movieTitle값과 movieYear값을 movies 객체에 추가해줍니다. 주의!...movies,

자식 컴포넌트에서 변경된 State를 부모 컴포넌트에게 props 형태로 보내줄 수 있습니다. ⇒ 인자로 전달받을 때, 사용하고자 하는 인자만 props형태를 사용하지 않고도 객체 형태로 받아와 사용할 수 있다. - { addMovie }. 사용하고자 하는 데이터의 종

React Router: Declarative Routing for ReactReact에서 여러 페이지를 가질 수 있도록 도와주는 패키지입니다.

BootstrapNavbar 컴포넌트 생성

react-router-dom에서 Router(BrowserRouter), Switch, Route, Link 등의 기능을 제공해줍니다. Router 사용Router 태그로 return 하는 전체 태그를 감싸줍니다.Link 사용Link to 속성 뒤에 원하는 경로를 문

Navigation용 linkNavLink에는 activeClassName이라는 속성이 있는데, 뒤에 문자열로 원하는 클래스 이름을 적으면 이 페이지가 active일 때 선택한 태그의 클래스로 들어가게 됩니다. Movie listUsers→ 현재 위치하고 있는 페이지의

JSONPlaceholderJSONPlaceholder에서 가짜 유저 데이터를 받아올 수 있습니다.Listing all resources(리스트 받아오기)fetch 명령어로 url로 요청을 보내면 user 정보가 응답으로 전달됩니다. user 정보를 받아오려 하기 때문

Official CDN of Bootstrap and Font Awesome위의 CSS의 HTML태그 코드를 복사하여 public폴더의 index.html에 붙여줍니다. 스크린샷 2021-10-12 오전 3.17.35.pngcard 형태로 출력Boots

코드가 길어질수록 를 계속 반복해서 사용하게 됩니다. 이런 문제점을 해결하기 위해서 routes 파일을 따로 만들어서 모든 route 객체들을 관리해줍니다. routes 파일각각의 page를 import 하고, 각 route 객체의 path와 component를 rou