본문 바로가기

프론트엔드16

css 그림자 관련 기록 css 적용 시 transition과 함께 사용하면 좋은 box 그림자 단계가 높아질수록 더 진하고 퍼지는 그림자 모양입니다. 1단계 : box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 2단계 : box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 3단계 : box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 4단계 : box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rg.. 2022. 8. 2.
리액트 Context API 리액트로 코드를 짜다보면 중간 컴포넌트들이 단순히 props를 넘기는 역활을 할 때가 있습니다. 이런 경우, Context API를 사용하면 Context를 선언한 컴포넌트의 하위 컴포넌트들에서 Context에 존재하는 값에 접근할 수 있는 권한을 설정할 수 있습니다. 1) 선언 const MyContext = React.createContext(); creat 2) 값 생성 ... 하위 컴포넌트 Provider로 하위 컴포넌트를 감싸주면 하위 컴포넌트에서 Context에 접근할 수 있는 권한이 주어집니다. 어떤 값 부분에는 context에 넣고 싶은 값을 직접 적어주거나 선언한 뒤 적어줍니다. ex ) const 어떤값 = { name : "강아지", sound : "멍멍"} 3) 값 사용 const .. 2022. 5. 28.
리액트 배열에 데이터 수정하기 배열 데이터를 수정하기 위해서는, 하위 컴포넌트에서 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.
리액트 배열에 데이터 삭제하기 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.
리액트 배열형 자료의 랜더링 배열형 자료의 원소를 나열하기 위해서 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.
리액트 useRef(1) DOM 선택 React에서 특정 DOM(Document Object Model)을 선택하고 싶을 때 useRef를 이용할 수 있습니다. 다음 예제에서는 리셋 버튼을 누르면 포커스가 이름 input으로 이동하도록 할 것입니다. 1) 객체 생성 import React from "react"; import { useState,useRef } from "react"; function Func(){ //선언 const [inputs, setInputs]=useState({ nickname : '', name : '' }); //값 추출 const {name,nickname} = inputs; //ref 선언 const nameInput = useRef(); nameInput이라는 ref 객체를 생성합니다. 2) 기능 부여 /.. 2022. 5. 7.
반응형

티스토리툴바