728x90 반응형 리액트 기초6 [노마드코더] ReactJS로 영화 웹 서비스 만들기 + Router 안녕하세요 꼬바리 입니다. 노마드 코더 에서 무료 강의인 ReactJS로 영화 웹 서비스 만들기를 완료 했다. 리액트를 처음 배우는거라 props state locetion등 어려움이 많았지만 강의 초반 기본 문법을 배우고 들어간다. 작은 app을 만들었지만 사실 이번에 배운 강의에 완전히 이해했다고 하기 어렵다 내가 만든 리액트 app으로 조금더 정리해야겠다. (난 아날로그 인간이므로 공책에 쓰는게 더 쉽게 이해된다.) 결과물 => main home이다. 영화 사이트에서 api이용 json형식으로 영화의 정보를 가져와 출력했다. 왼쪽 상단 작은 네이게이터 추가했다. 영화리스트들중 한 section 서머리의 내용이 길어서 리스트가 깨지는걸 방지하기위해 slice사용하여 180글자씩 잘라냈다. 영화 클릭시.. 2021. 5. 6. [리액트] 움직이는 Component-노마드코더 안녕하세요 꼬바리입니다. app.js import React from 'react'; class App extends React.Component{ state ={ isLoading: true, movies : [] }; componentDidMount(){ setTimeout(() =>{ this.setState({isLoading:false}); },6000 ); } render(){ const { isLoading } = this.state; return ( {isLoading ? "Loading..." : "We are ready"} ); } } export default App; //movies:[] 주석 처리 가능 ^^ setTimeout 으로 6초 후에 loading -> we are rea.. 2021. 5. 3. React | Component의 State State state란 말 그대로 컴포넌트의 상태 값입니다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고, state는 컴포넌트 내에서 정의하고 사용합니다. 위의 코드를 설명하자면, render() { 이 부분이 실행할 함수가 들어가는 부분이다. } div를 클릭하면 clicked라는 상태를 수정한다. 여기서 setState() 함수는 state를 업데이트한다. {clicked: !this.state.clicked}라는 말은 현재 clicked의 반대로 (toggle처럼) 저장한다는 의미이다. {this.state.clicked ? '좋아요' : '싫어.. 2021. 4. 29. React | JSX란? 렌더링 Rendering이란? 0. 들어가기에 앞서: React란? JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다. 이 리액트는 3가지의 대표적인 특징을 가지고 있다. 1. JSX 문법 2. Component 기반 3. Virtual DOM 이번엔 먼저 JSX에 대해 알아보도록 하자. 1. JSX란 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다! 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. "React에서 HTML을 표현할.. 2021. 4. 29. [React] 리액트 프로젝트 생성과 빌드 해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 프로젝트를 만들기 위해선 creact-react-app을 이용합니다. npm install -g create-react-app create-react-app 프로젝트이름 저는 프로젝트이름을 react-tutorial으로 생성하였습니다. cd react-tutorial npm start 해당 폴더로 접근한 뒤 npm start로 실행할 수 있습니다. 정상적으로 리액트 페이지가 로드됩니다... 2021. 4. 29. [React] React.js란 무엇인가? React.js란 무엇인가? React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다. 보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다. 이렇게 특정 부분을 나누어 개발하는 방법론을 MVC 패턴, MVVM패턴 이라고하며, React.js는 View 즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다. 개발을 처음 공부한다면 MVC 패턴, MVVM패턴 외에 다양한 패턴들을 익히고, 손으로 직접 구현해보길 바란다. 다양한 패턴들이 처음에는 익숙하지.. 2021. 4. 29. 이전 1 다음 728x90 반응형
