본문 바로가기

전체 글93

리액트 배열에 데이터 수정하기 배열 데이터를 수정하기 위해서는, 하위 컴포넌트에서 props로 변경할 state 객체와 setter를 받아 변경할 수 있습니다. 이번 실습에서는 동물들의 이름과 울음소리를 변경해보겠습니다. 0) 준비사항 animal 객체는 id, animalType, sound로 이루어져 있었습니다. 이 곳에 mode를 추가하여 수정 모드로 돌입하도록 표시하도록 하겠습니다. App 컴포넌트 //animals state, 동물과 울음소리가 들어있음 const [animals, setAnimals] = useState([ { id : 1, animalType : '고양이', sound : '야옹', mode : false }, { id : 2, animalType : '강아지', sound : '멍멍', mode : fa.. 2022. 5. 15.
Snowman - Sia https://vibe.naver.com/track/20067936 Snowman - Sia [VIBE] 좋아하는 음악, 좋아할 음악이 모두 여기에 vibe.naver.com Don't cry snowman not in front of me Who will catch your tears If you can't catch me darling If you can't catch me darling Don't cry snowman don't leave me this way A puddle of water can't hold me close baby Can't hold me close baby I want you to know that I'm never leaving Cause I'm Mrs. Snow 'till.. 2022. 5. 15.
리액트 배열에 데이터 삭제하기 state에 선언된 배열을 삭제하는 하는 방법은 다음과 같습니다. 1) 삭제하고자 하는 배열 데이터의 key 값을 조회합니다. 2) 배열 데이터를 탐색하여 key값과 불일치되는 값을 state에 갱신합니다. 1)의 경우, 삭제하고자 하는 데이터의 onClick 이벤트로 해당 key값을 인자로 넘깁니다. function Animal({animal,onRemove}){ return( {animal.id} : {animal.animalType} {animal.sound} onRemove(animal.id)}>삭제 ); } 2)의 경우, 상위 컴포넌트에서 filter메서드를 사용하여 animal.id와 다른 값을 state에 세팅합니다. //animals state에 데이터 삭제 const onRemove=(i.. 2022. 5. 14.
리액트 배열에 데이터 추가하기 다음은 동물 종류와 동물 울음소리를 지정한 배열입니다. 이를 state에 animals 라는 이름으로 저장하겠습니다. //animals state, 동물과 울음소리가 들어있음 const [animals, setAnimals] = useState([ { id : 1, animalType : '고양이', sound : '야옹' }, { id : 2, animalType : '강아지', sound : '멍멍' }, { id : 3, animalType : '닭', sound : '꼬꼬댁' } ]); input을 이용하여 데이터를 추가하기 위해 다음과 같은 메서드를 선언하였습니다. //animals state에 새롭개 생성된 animal 객체 추가 const onCreate=()=>{ const animal =.. 2022. 5. 13.
[백준] 16928번: 뱀과 사다리 게임 Java 문제 뱀과 사다리 게임을 즐겨 하는 큐브러버는 어느 날 궁금한 점이 생겼다. 주사위를 조작해 내가 원하는 수가 나오게 만들 수 있다면, 최소 몇 번만에 도착점에 도착할 수 있을까? 게임은 정육면체 주사위를 사용하며, 주사위의 각 면에는 1부터 6까지 수가 하나씩 적혀있다. 게임은 크기가 10×10이고, 총 100개의 칸으로 나누어져 있는 보드판에서 진행된다. 보드판에는 1부터 100까지 수가 하나씩 순서대로 적혀져 있다. 플레이어는 주사위를 굴려 나온 수만큼 이동해야 한다. 예를 들어, 플레이어가 i번 칸에 있고, 주사위를 굴려 나온 수가 4라면, i+4번 칸으로 이동해야 한다. 만약 주사위를 굴린 결과가 100번 칸을 넘어간다면 이동할 수 없다. 도착한 칸이 사다리면, 사다리를 타고 위로 올라간다. 뱀.. 2022. 5. 12.
[백준] 2477번: 참외밭 Java 문제 시골에 있는 태양이의 삼촌 댁에는 커다란 참외밭이 있다. 문득 태양이는 이 밭에서 자라는 참외가 도대체 몇 개나 되는지 궁금해졌다. 어떻게 알아낼 수 있는지 골똘히 생각하다가 드디어 좋은 아이디어가 떠올랐다. 유레카! 1 m^2의 넓이에 자라는 참외 개수를 헤아린 다음, 참외밭의 넓이를 구하면 비례식을 이용하여 참외의 총개수를 구할 수 있다. 1 m^2의 넓이에 자라는 참외의 개수는 헤아렸고, 이제 참외밭의 넓이만 구하면 된다. 참외밭은 ㄱ-자 모양이거나 ㄱ-자를 90도, 180도, 270도 회전한 모양(┏, ┗, ┛ 모양)의 육각형이다. 다행히도 밭의 경계(육각형의 변)는 모두 동서 방향이거나 남북 방향이었다. 밭의 한 모퉁이에서 출발하여 밭의 둘레를 돌면서 밭경계 길이를 모두 측정하였다. 예를 .. 2022. 5. 11.
리액트 배열형 자료의 랜더링 배열형 자료의 원소를 나열하기 위해서 map()을 이용할 수 있습니다. 마치 Java의 향상된 for문과 같이 사용하여 배열의 원소 객체의 네이밍을 지정하여 사용합니다. {users.map(user=>( ))} users라는 자료형의 원소 객체를 user라 지칭하고, 이를 User 컴포넌트에 user에 전달하였습니다. key는 리액트에서 나열할 떄 사용되는 식별키 속성이며 지정해줘야 하는데, 만약 마땅히 식별키로 지정할만한 데이터가 없다면, 2번째 파라미터인 idx를 사용할 수 있습니다. {users.map((user,idx)=>( ))} 리스트 컴포넌트 import React from "react"; //User 컴포넌트, user의 내용을 출력한다. function User({user}){ retur.. 2022. 5. 11.
리액트 useRef(2) 변수관리 useRef는 DOM을 선택하는 기능뿐만 아니라, 리랜더링되어도 초기화되지 않는 변수를 관리할 수 있습니다. 이러한 특징을 이용해 스톱워치를 만들어 보겠습니다. 1) 선언 function StopWatch(){ //ref 객체 const timeRef = useRef(null); //start 작동 여부 판별할 state const [isStartOperation,setIsStartOperation]=useState(false); //경과 시간 state const [count,setCount]=useState(0); 시간 증가와 관련있는 timeRef를 useRef를 이용해 선언합니다. start 버튼 클릭 여부를 판별할 isStartOperation을 false로 초기화하고, 경과된 시간을 표시하기 .. 2022. 5. 10.
반응형

티스토리툴바