웹(web)/프론트엔드-react
-
리액트 컴포넌트 내에서 반복적으로 계산되는 값 최적화하는 법웹(web)/프론트엔드-react 2021. 3. 2. 00:36
그래프을 렌더링하는 컴포넌트에서 그래프를 위한 데이터 상태를 갖는데 이를 필터링 한 값을 계산하여 사용한다고 해보자. 그래프 데이터가 100만개 있고 graphData([1,2,3,4,5,6, ... , 1000000]) 이 있다고 하고 짝수번 째 인덱스 값들을 사용하여 계산한 값을 evenValue에 저장하여 사용한다고 해보자. const evenValue = graphData[0]**2+graphData[2]**2...graphData[1000000]**2 라는 표현식이 있을 것이다. 별도의 작업 없이 코드로 타이핑 되어 있다면 컴포넌트에서 렌더링 될 때마다 이 연산이 렌더링 될 때마다 다시 계산될 것이고 그 비용은 굉장히 클 것이다. 따라서 리스트의 값이 변경이 되지 않았다면 재사용이 되는 것이 ..
-
리액트를 다루는 기술 absolute path 사용법웹(web)/프론트엔드-react 2021. 2. 16. 21:25
.env에 NODE_PATH=src를 넣고 sass-loader 설정 부분에 includePaths: [paths.globalStyles]를 넣는 작업 등을 하는데 현재 create-react-app에서는 사용이 안되는 것으로 보인다. ..../src/components/App.js 에서 다음 파일( ..../src/styles/app.scss )을 절대 경로로 import 하는 법은 다음과 같다. package.json이 있는 경로에 jsconfig.json을 만들고 입력한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그 후 App.js 에서 다음처럼 입력한다. import "styles/app.scss"; 그럼 절대경로로 불러온..
-
리액트에서 배열 데이터를 화면에 출력하는 방법웹(web)/프론트엔드-react 2020. 7. 4. 01:32
사람에 대한 이메일 정보가 여러 개 등록되어있다고 하면 javascript을 이용하여 객체를 만들고 반복문으로 객체를 만드는 작업을 해야했다. 리액트에서는 더 쉽고 간편하다. 다음과 같은 데이터가 있고 화면에 아래와 같이 나타내고 싶다. const users = [ {id:1,username:'bob',email:'bob@gmail.com' }, {id:2,username:'aoa',email:'aoa@gmail.com' }, {id:3,username:'bob',email:'coc@gmail.com' } ]; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList({ users }) { return ..
-
inputText 기본 컴포넌트웹(web)/프론트엔드-react 2020. 7. 3. 22:46
위와 같이 인풋에 입력한 값이 화면에 실시간으로 반영되고 초기화버튼도 만들려면 어떻게 해야할까? 다음과 같은 컴포넌트를 만들면 된다. import React, {useState} from 'react'; function InputSample(){ const [text, setText] = useState(''); const onChange = (e) =>{ setText(e.target.value); } const onReset = () =>{ setText(''); } return ( 초기화 값: {text} ) } export default InputSample; 1. useState를 import한다. import React, {useState} from 'react'; 2. 초기값을 '' 로하는 ..
-
Counter 컴포넌트웹(web)/프론트엔드-react 2020. 7. 3. 22:18
Counter.js 파일에 다음과 같은 코드를 작성하면 된다. import React, { useState } from 'react'; function Counter(){ const [number, setNumber] = useState(0); const increase = () =>{ setNumber(number +1); }; const decrease = () => { setNumber(number -1); }; return ( {number} +1 -1 ) } export default Counter; 하나씩 살펴보자. 1. useState를 통해 number 변수와 해당 변수의 setter를 한 번에 만들어낸다. const [number, setNumber] = useState(0); 2. 증가..
-
컴포넌트 사용시 내부에 컴포넌트가 있는 경우웹(web)/프론트엔드-react 2020. 7. 3. 22:10
App에서 다음과 같이 사용하고자 한다. Wrapper컴포넌트 안에 Hello 컴포넌트가 들어간 것을 볼 수 있다. function App() { return ( ); } Wrapper에서 인자로 {children}을 통해 Hello 컴포넌트를 받아주어야한다. function Wrapper({children}){ const style = { background: "gray" }; return {children} } function Hello() { return ( 안녕하세요 ); } 이렇게 각각 작성하면 다음과 같은 결과를 얻을 수 있다.
-
리액트 컴포넌트 사용시 속성 넘겨주기웹(web)/프론트엔드-react 2020. 7. 3. 22:02
리액트 컴포넌트를 만들어 둘 때 파라미터 부분이 있는 것을 볼 수 있다. 그럼 리액트 컴포넌트를 가져올 때 어떻게 하면 속성을 넘기고 그 속성을 사용할 수 있을까? 1. 사용하는 부분에서 와 같이 속성=값 형태로 넘겨준다. 2. 컴포넌트 부분에서 인자 부분에서 props으로 하여 속성 값 name, color로 사용 function Hello (props){ const style = { color: props.color}; return ( name: {props.name} ) } 3. 속성 기본 값이 필요한 경우 다음과 같이 사용 Hello.defaultProps = { name: 'peter' }