React

useEffect(()=>{실행할 코드},[count]) useEffect 의 첫째 파라미터로는 실행할 코드를 넣어주고, 둘째 파라미터로는 [](배열)을 넣을 수 있는데, []안에 변수나 state 같은 것들을 넣을 수 있습니다 이런 경우에는 [] 에 있는 변수나 state 가 변할 때만, useEffect 안의 코드를 실행해줍니다 위의 코드는 count 라는 변수가 변할때만, useEffect 안의 코드를 실행되겠군요. useEffect(()=>{실행할 코드},[]) 만약두번째 파라미터에 빈 배열을 넣어준다면, 처음 렌더링 시 1회 실행하고 영영 실행해주지 않습니다. 처음에 딱 한번만 실행해줍니다 clean up function useEffect를 동작하기 전에 특정 코드를 실행하고 싶으면 ret..

컴포넌트가 생성되거나 업데이트되거나 삭제될때, 컴포넌트에 어떤 효과를 주는 함수 useEffect()를 배워볼 거예요 use어쩌구로 시작하기 때문에 이걸 lifecycle hook 이라고도 부릅니다 요즘 React에서 Lifecycle hook 쓰는 법 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } 상단에 useEffect import 해오고, useEffect 에 콜백함수(파라미터를 함수로 받는것)를 적어주면, {} 안에 있는 토드를 컴포넌트 로드(생성) 또는 업데이트시 실행합니다 useE..

저번에 app.js (메인페이지) 파일에 디테일 컴포넌트를 하나 만들었는데요 여기에는 상품정보가 아직 채워지지 않은 상태입니다. 그래서 props 를 사용해서 shoes 정보들을 입력해볼게요 function Detail(props){ return( {props.shoes[0].title} {props.shoes[0].content} {props.shoes[0].price}원 주문하기 ) } export default Detail; 이렇게 하면 현재 상세페이지에는 shoes 데이터의 0번째 정보만 보여집니다 3개의 상품이 모두 보이도록 하려면 어떻게 해야할까요? 라우터를 3개 만들면 되겠죠? (슬래시 기호도 맘대로 사용가능한데 단어간 띄어쓰기용으로 많이 사용) 이렇게 하면 3개 페이지 완성! 하지만, 만약..

오늘은 상품목록을 컴포넌트로 만들어볼거예요. 그리고 순차적으로 숫자가 증가하면서, 상품목록이 늘어나는 형태이니 map 함수로 묶어서 간편하게 만들어 볼겁니다 function App() { let [shoes]= useState(data) return ( //생략 ); } export default App; 현재 Card 라는 컴포넌트 3개를 만든 상태입니다. 아직 텅 비어있기 때문에 data 배열에서 정보를 가져와 주어야 해요 let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", pric..

Input box 종류 ​ 이거 말고도 다양한 종류의 인풋 박스가 많으니 필요할 때 찾아쓰기 에 뭔가 입력하면, 코드가 실행되도록 이럴땐 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다 {실행할 코드}}/> 이벤트 핸들러는 많다 onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행해줌 onScroll={ } 이건 이 요소를 스크롤 했을때 안의 코드를 실행해줌 입력값을 가져오는 법 {console.log(e.target.value)}}/> e라는 파라미터를 추가하고, e.target.value를 쓰면 사용자가 입력한 값을 가져올 수 있음 참고로 e말고 작명 자유롭게 해도됨 e.target => 이벤트가 발생한 html e.preventDefault()=> 이벤..

안에 state를 쓰려고 하는데 문제가 있음 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 하지만, '글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다 왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal() 안에 있지 않으니까요 자바스크립트에서는 다른함수에 있는 변수를 마음대로 가져다 쓸 수 없습니다 다른 함수의 변수를 가져다 쓰려면? 컴포넌트 2개가 부모/자식 관계인 경우에 가능합니다. (한 컴포넌트가 다른 컴포넌트 안에 있는 경우) 부모 ..

모든 array 자료 오른쪽에는 map()을 붙일 수 있습니다 map 함수 쓰는법 기능1. var 어레이 = [2,3,4]; 어레이.map(function(){ // 이 안의 코드를 어레이원소 갯수만큼 실행해주세요~ console.log(1) }); 어레이에 들어있는 원소 갯수만큼 {}의 코드를 반복실행해준다 저러면 진짜로 console.log(1) 3번 실행됨 기능2. var 어레이 = [2,3,4]; 어레이.map(function(a){ // 어레이 안에 있는 원소들을 하나씩 출력해주세요~ console.log(a) }); 콜백함수 안에 파라미터(a)를 작명하면, 그 파라미터는 어레이의 원소들을 하나씩 출력해줍니다 저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 기능3. var 어레이 = [2,3,4]..

리동적인 UI 가 뭐나면, 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등 그런 UI를 의미합니다. 동적인 UI 만드는 방법 1. html, css로 미리 UI 디자인을 다 해놓고 2. UI의 현재상태를 state 로 저장해두고 3. state에 따라서 UI 가 어떻게 보일지 조건문 등으로 작성 1번은 했으니 2번부터 할거임 step 2. UI의 현재상태를 state로 저장 state 하나 만들고, 거기에 현재 UI의 상태정보를 저장해두라는 소리 let [modal, setModal] = useState(false); useState 안에 무슨 자료를 넣어야 되냐면 정말 마음대로 하면됨 모달창은 열림 or 닫힘 이 두개 상태밖에 없기 때문에 그거 2종류만 표현할 수 있는 자료형이면..