본문 바로가기

내마음대로만들어보자/React58

[Swipe] 우정테스트 사이트 만들기(Feat.리액트) 첫번쨰로 Swipe를 이용해서 아래 동영상과 같이 퀴즈에 대한 문제를 풀수 있도록 움직여주는 부분을 만들어보자! (이런 부분들은 공식문서를 참고하면은 참 쉽게 할 수있다는데 아직은 완벽하게 이해한게 아니다보니 공식문서도 어렵다ㅠㅠ) 반복하여 이해하는게 좋을 것 같다!! 1. 사전준비 패키지 설치하기 yarn add react-tinder-card Quiz.js에서 사용을 해야하므로 설치한 패키지를 임포트해오는걸 잊지말자! import TinderCard from "react-tinder-card"; 세부적인 내용은 공식문서 참고하자. https://www.npmjs.com/package/react-tinder-card react-tinder-card A npm react module for making .. 2021. 8. 8.
[조건부렌더링/state 데이터 관리] 우정테스트 사이트 만들기(Feat.리액트) * 조건부렌더링 각각의 페지이마다 조건부렌더링을 해주려면 가장먼저 필요한 부분은 App.js 에 state에 page값을 만들어줘야한다. class App extends React.Component { ..... this.state { name: "손흥민" page: "quiz" }; } 그다음에는 리턴해줄때 각 조건에 맞는 페이지를 보여줄 수 있도록 조건을 걸어주면된다! render () { return ( {this.state.page === "quiz" && ()} // 조건이 참일경우 퀴즈페이지를 보여줘라 라는 의미 {this.state.page === "start" && ()} {this.state.page === "score" && ()} ) } 이렇게 조건부렌더링을 작성해두고 state에 p.. 2021. 8. 8.
[퀴즈,점수화면 뷰만들기] 우정테스트 사이트 만들기(Feat.리액트) 이번에 만들어볼 부분은 퀴즈화면과 점수화면이다! 여기에서 이벤트리스너를 통해 스와이프를 만들어서 퀴즈를 풀어볼 수 있도록 만들었는데 참으로 어려웠다ㅠ 그래도 다시한번 동작하는 원리, 이해하기위해 차근차근 정리하면서 공부해보자! 1. 필요 설치 패키지 yarn add react-tinder-card yarn add styled-components 2. 화면구성 Quiz.js Score.js 눈에 익숙해질 수 있도록 함수형 컴포넌트의 기본뼈대를 짚고넘어가자. import React from "react"; const Quiz = (props) => { return null; } export default Quiz; Score.js도 동일하게 함수형 컴포넌트로 시작하자. 그리고 잊지말고 App.js에서 가져다.. 2021. 8. 5.
[시작화면] 우정테스트 사이트 만들기(Feat.리액트) 클래스형 컴포넌트를 활용해서 우정테스트 시작화면(Start.js)를 만들어보자 1. 리액트 프로젝트 생성 혹시라도 터미널에서 "npm install N/A" 라는 오류가 발생한다면 우리가 사용하고자하는 버전을 사용한다고 명령어 입력해주면된다. → npm use 12.18.4 그럼 본격적으로 터미널에서 리액트 프로젝트를 생성해보고 시작해보자. yarn create react-app [프로젝트명] 생성된 프로젝트 이동하기 : cd [프로젝트명] ※ [] 은 구분하기위한 정보이며, 실제로 터미널에 입력하면안된다. 이제 이동한 후, 생성된 프로젝트가 잘 동작하는지 확인해보자! yarn start 2. 화면구성 컴포넌트를 쪼개서 만들어보기위해 기존에 App.js에서 시작화면 Start.js를 불러와서 사용해보자... 2021. 8. 4.

티스토리툴바