ReactBeginnerMovies

Starting from JavaScript, Finished in HTML.리액트의 규칙 중 하나는 HTML을 페이지 안에 직접 작성하지 않는다는 것이다. 그 대신에 우리는 자바스크립트로 HTML의 기능을 구현할 것이다. 즉 리액트로 element를 생성할 것이라는

리액트(React)는 사용자 인터페이스(UI)를 개발하기 위한 JavaScript 라이브러리로, JSX(JavaScript XML)는 리액트에서 사용되는 중요한 개념 중 하나입니다. JSX는 JavaScript의 확장 문법으로, UI 컴포넌트를 작성할 때 HTML과 비

리액트(React)에서의 state는 간단히 말해 컴포넌트의 '기억력'이라고 생각할 수 있습니다. 컴포넌트는 사용자와 상호 작용하고 데이터를 표시할 때 이 기억력을 사용합니다.예를 들어, 웹 페이지에 버튼이 있고 이 버튼을 클릭할 때마다 숫자가 증가한다고 가정해봅시다.

지난 코드에서 우리는 counter의 값을 변경하기 위한 방식으로 위와 같은 코드를 작성했다.하지만 이 코드는 다른 컴포넌트에서 counter가 update될 수 있다는 점에서 그렇게 나이스한 코드가 아니다.이전 단계의 state를 이용해서 현재 state를 바꾸려고

최상위 컴포넌트인 App 안에 MinutesToHours라는 컴포넌트를 집어 넣었다.이것을 Divide and Conquer (분할정복)이라고 한다. 위의 코드를 기반으로 다른 컴포넌트를 추가한 단위 변환기를 만들어 보자.우선 App 안에 여러 변환에 관한 다른 하위

지난 번 작성했던 소스코드에서 우리는 최상위 컴포넌트인 App 안에 다른 컴포넌트를 집어 넣었다. 말 그대로 HTML을 캡슐화한 듯한 효과를 준 것이다.그러나 그 자식 컴포넌트들은 App으로부터 어떠한 데이터를 받거나 할 필요는 없이, 독립적으로 존재하였다.이러한 관점

npx create-react-app my-appnode -v + npx nodejs 설치 (LTS) 후 버전 확인 + npx 명령어 돌아가는지 검사여기까지 왔으면 create-react-app 사용 준비 완료npx create-react-app 폴더명동일한 폴더명을

Create React App (CRA)를 사용했기 때문에 React.useState() 와 같은 형태로 사용하지 않음.임포트 하고 바로 useState()npm start 를 통해 이렇게 실행시킬 수 있다.previous state가 클릭 함수에 따라 prev + 1

State(showing)의 변경에 따른 삼항연산자를 통해 특정한 컴포넌트를 보였다 안 보였다 하는 기능을 구현할 수 있다. Hello 컴포넌트에 useEffect 코드를 추가작성하였다.그런데 Hello의 useEffect가 왜 여러 번 실행되는 건지 의문스러울 수 있

form은 그 자체로 submit 이벤트를 갖고 있기 때문에, form 내부에 있는 버튼을 누르기만 해도 컴포넌트를 리프레시될 것이다.그리고 나는 그러한 기능을 막고 싶다.그래서 나는 event.preventDefault() 라는 함수를 이용하였다.event.preve

fetch() 함수는 웹 브라우저와 JavaScript에서 네트워크 요청을 만들기 위한 메서드입니다. 이 함수를 사용하면 원격 서버로 HTTP 요청을 보내고 서버에서 받은 응답 데이터를 처리할 수 있습니다.fetch() 함수는 웹 애플리케이션에서 데이터를 원격 서버에서

https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year 사이트의 자료를 통해 어플을 만들어 보기로 하자.늘 하는 세팅로딩에 대해서 작업 후 false 세팅하지만async/wait가 fetc

이제 restful하게 페이지를 전환하고 싶기 때문에 React Router라는 것을 사용해보겠다.스크린(패이지) 단위, 즉 Route 별로 생각하며 개발을 이어나가겠다는 말이다. 리스트에서 특정한 영화를 클릭하면 그 영화에 대한 정보만 있는 하나의 페이지로 이어지고

React Router는 다이나믹 (동적) url을 지원해주기도 한다.다이나믹하다는 것은 무엇인가? url에 변수를 넣을 수 있다는 것이다. Restful에 한 걸음 더 가까워질 것이다. sitename.com/dynamic/restful/1234이런 식으로 표현하지