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. React에 대해서 정리해보자 React react는 view부분을 컴포넌트 단위로 개발하는 자바스크립트 라이브러리이다. 또, react는 단지 유저 인터페이스를 만들기 위한 라이브러리이기 때문에 가볍다. 프레임워크와 라이브러리 차이 프레임워크 틀이 있고, 우리가 채워 넣어서 사용할 수 있으나 틀을 벗어나기는 어렵다. 그리고 보통 단 한가지의 프레임워크만 사용한다. 다른 프레임워크나 라이브러리를 사용할 경우 충돌이 생길 수 있기 때문이다. 사용하지 않는 기능도 구현되어있기 때문에 상황에 따라서 무겁게 느껴진다. 라이브러리 필요한 곳에 사용하면 되고, 다른 라이브러리와 충돌할 일도 없다. 프레임워크 처럼 모든 기능이 구현되어있지 않아서 가볍다. Angular대체가 React인가? angular와 react를 비교하는 경우가 있는데 이것.. 2021. 11. 29. create-react-app을 npx로 설치하는 이유 이때까지 리액트로 프로젝트를 시작하면서 npx create-react-app 을 이유도 모른체 사용해왔다. 왜 react를 npx로 설치해야하는지 알아보자. 우선 npx외에 글로벌로 설치하는 방법이 있다. npm install -g [모듈명]를 하면 내 로컬 전역에 모듈이 설치되기 때문에 다른 프로젝트를 할 때에 또 설치를 할 필요가 없다. 하지만, 이 방법은 문제가 있다. 전역으로 설치가 되었기 때문에 주기적으로 모듈을 최신화하지 않으면 버전 확인이 불가능하다. 또 각 프로젝트에 각각 다른 버전의 모듈이 필요한 경우가 있는데 전역으로 설치를 하면 모두 같은 버전이기 때문에 문제가 발생한다. 특히 create-react-app 같은 보일러플레이트는 변경사항이 잦기 때문에 글로벌로 설치할 경우 더욱 더 문.. 2021. 11. 19. 이전 1 다음
