본문 바로가기

Front End42

[React] To Do List 이번에는 리액트로 기능 구현뿐만 아니라 스타일링까지 조금 넣었다. 리액트를 쓰면서 느낀 것은 state의 흐름을 읽지 못하면 그냥 끝나는 거구나 싶었던... 그래서 리덕스나 모벡스와 같이 쓰는 건가 싶었다. 그래서 보통 리액트를 배울 때 세트로 리덕스를 함께 배우는 것인가. 이것 역시 리액트에서 Form을 사용하여 데이터를 받아오고 그걸 출력하는 거라서 어제 했던 상자 만들기와 비슷하지만 조금 더 까다로운 부분이 있다면 내가 입력했던 리스트를 수정하는 부분이다. 컴포넌트의 구성은 App > TodoList > NewTodoForm - Todo class Todo extends React.Component { constructor(props) { super(props); this.state = { isEd.. 2021. 8. 31.
[React] return을 알맞게 써줘야 합니다. 강의 Udemy The Modern React Bootcamp 이번 강의에서는 Form을 리액트에서 다루는 거 였다. 이것 역시 component를 여러 개로 나눠서 하나는 form을 구성하는 component, box를 만들 때 필요로 하는 데이터를 받고 전달해주는 component, 그리고 box를 만들어내는 component. 이렇게 모아놓고 보니까 JS에서 썼던 MVC 모델이 생각나네. 리액트 자체가 그렇게 사용할 수 있도록 만들어진 프레임워크인건가? 아무튼 처음에 대략적인 설명을 듣고 코드를 짰을 때는 remove 버튼을 작동할 수 있게끔 하는 거 빼고는 얼추 작동하게 했는데 풀이강의 듣고 나서 다시 처음부터 싹 다 코드를 쓰는데 어라? 왜 form에서 입력한 게 box로 만들어져야 하는데 왜 .. 2021. 8. 31.
[React] Lights Out : 셀의 불을 모두 끄자 노란색으로 된 셀이 불이 켜진거라는 가정하에 노란색 셀을 다 진한 회색으로 만들면 이기는 게임 그리고 완성된 결과물(이 게임에 자신이 없어서 끝에 YOU WON이 나오도록 조작함...). 사실 초반에는 설명만으로도 감을 잡을 수 없어서 강사분이 어떻게 짜는 지 보고 코드를 나름대로 짜봤다. 설명을 보기 전에 이런 결과물만 보고 어떤 식으로 component를 나눌지, defaultProps와 state는 어떤 것으로 정할 지 생각해보라고 했는데 이 때부터 감이 잡히지 않았다. 난 셀에다가 켜지고 꺼지는 state를 반영해야 하나 싶었는데 풀이방법은 여러가지가 있겠지만 셀은 담고 있는 보드를 만들 때부터 각각의 셀에 랜덤으로 true와 false의 값을 부여한다. 그리고 이 값으로 게임 시작 때부터 색상을.. 2021. 8. 30.
[React] 동전을 뒤집어보자 -! 동전을 뒤집는 동작을 리액트로 구현하기. 버튼을 누를 때마다 뒤집은 횟수가 증가하고 동전 앞면과 뒷면이 랜덤으로 나오고 이 역시 나올 때마다 그 횟수를 증가하게끔 한다. 간단해보이는데 생각보다 코드를 써야하더라. 버튼을 누르고 횟수 증가하고 랜덤이 되게끔 하는 것까진 구현했는데 동전 이미지의 면을 어떻게 하위 Component에 전달하지 모르겠더라. 이부분은 강사분이 하는 풀이영상을 봤는데 동전의 상태까지 state에 넣어 변화하는 상태를 기록하는 거였다. class CoinFlip extends React.Component { static defaultProps = { sides: ['heads', 'tails'] }; constructor(props) { super(props); this.state .. 2021. 8. 28.
[React] 정해진 배열 안에서 랜덤으로 Index 뽑기 [상황설명] Udemy에서 리액트와 관련해 강의를 듣고 있는데 defaultProps으로 포켓몬 8마리를 배열 안에 넣고, 플레이어가 2명이 있다는 가정 하에 랜덤으로 4마리를 뽑아 각각의 경험치를 더해서 승자와 패자를 나누는 걸 코드로 작성한다. class Pokegame extends React.Component { static defaultProps = { pokemons: [ { id: 4, name: 'Charmander', type: 'fire', base_experience: 62 }, { id: 7, name: 'Squirtle', type: 'water', base_experience: 63 }, { id: 11, name: 'Metapod', type: 'bug', base_experi.. 2021. 8. 26.

티스토리툴바