react6 warp 컴포넌트 만들기 리액트에서는 컴포넌트 단위로 코드를 분리할 수 있는데 자유도가 높기 때문에 기준이 정해져있지 않고 사람마다 나누는 범위가 다르다. 기본적으로 재사용 가능하거나 부분적인 단위로 컴포넌트를 다루는데 유데미 강의에서 wrap컴포넌트도 만들 수 있다는 것을 알게 되었다. 감싸는 용도로 컴포넌트를 만들겠다는 생각은 해보지 않았는데 역시 뭐든지 응용이 중요한 것 같다. 본론에 들어가보자. import React from "react"; import "./Expenses.css"; const Item = (props) => { return ( Contents ); }; export default Item; import React from "react"; import "./ExpenseItem.css"; const C.. 2022. 1. 31. useEffect 정리 react hook중에 하나로 마운트, 언마운트, 업데이트시에 특정 작업을 처리할 수 있다. 마운트 : 컴포넌트가 처음 나타났을 때를 의미 언마운트 : 컴포넌트가 사라질 때를 의미 업데이트 : 특정 값이 바뀔 때를 의미 useEffect 구조 및 파라미터 useEffect(() => { console.log("컴포넌트가 처음 나타났을 때 실행"); return () => { console.log("컴포넌트가 사라질 때 실행"); }; }, []); useEffect는 위왁 같은 구조를 가지고 있으며, 첫번째 파라미터로는 함수가 들어가고, 두번째 파라미터로는 배열(deps)가 들어간다. deps는 3가지로 나눌 수 있다. 빈 배열을 넣는 경우 컴포넌트가 처음 나타날 때에만 useEffect에 등록한 함수가.. 2022. 1. 15. React에서 이미지 불러오기(public, src) React에서는 저장된 이미지가 public폴더에있는지 src폴더안에 있는지에 따라 불러오는 방법이 다르다. public 폴더에 저장할 경우 public > images에 저장되어있는 이미지를 불러오기 위해서는 태그를 사용해주면 된다. 주의 할 점은 public 폴더안의 파일은 ../src/images/main.jpg 이런식으로 경로 설정을 해주면 이미지가 불러와지지 않는다. 위와 같이 public안의 폴더나 파일의 경로로 바로 불러와준다. src 폴더에 저장할 경우 src폴더 안에서 이미지를 불러오기 위해서는 img의 src에 직접 경로를 넣어주지 않고, import해와야지만, 이미지가 불러와진다. 해당 파일이 있는 위치를 상대경로로 import해오고 img의 src값으로 넣어주면 이미지가 불러와진다... 2021. 12. 6. React 설치 및 간단 사용법 기존에는 webpack과 babel을 하나하나 설정해야했지만, create-react-app이 생기면서 가장 보편적인 패턴으로 react를 빠르게 개발할 수 있게 도와준다. 설치 npx create-react-app [폴더명] 현재 폴더에서 설치하려면 npx create-react-app . npx를 사용하는 이유에 대해서 궁금하다면 클릭 실행 및 빌드하기 설치를 한 후에 npm start를 하면, script에 있는 start가 실행되면서 localhost:3000에서 화면이 띄어진다. 이 화면에서 network탭에 들어가보면 사이트의 용량이 나오는데 생각보다 높다. 개발용으로 실행되는 것이기 때문에 압축하지 않았기에 용량이 클 수밖에는 없다. 실제 서비스에서는 용량을 최적화하여야 하기 때문에npm b.. 2021. 12. 1. 이전 1 2 다음
