Framework & Library/React
-
React 기초 - useEffect 함수Framework & Library/React 2021. 9. 22. 18:16
useEffect 함수의 사용 function App() { const [data, setData] = useState(0); const download = () => { let downloadData = 5; setData(downloadData); }; useEffect(() => { console.log('useEffect 실행됨'); download(); }); return ( 데이터 : {data} { setData(data + 1); }} > 더하기 ); } export default App; ㆍ useEffect() 함수는 App() 함수가 마운트 될 때 실행되는 함수이다. ㆍ 또한 상태 변수의 값이 변경될 때마다 실행된다. ㆍ 위 코드는 button의 onClick 함수에 의해서 상태 변수..
-
React 기초 - useState 함수Framework & Library/React 2021. 9. 22. 18:13
useState 함수의 사용 이유 function App() { let number = 1; const add = () => { number++; console.log(number); }; return ( 숫자 : {number} 더하기 ); } export default App; ㆍ 리액트는 일반적인 변수의 변경에는 렌더링이 되지 않는다. 따라서, 화면상에서는 number의 값이 1로 계속 유지된다. function App() { const [number, setNumber] = useState(1); const add = () => { setNumber(number + 1); console.log(number); }; return ( 숫자 : {number} 더하기 ); } export default..
-
React 기초 - 깊은 복사 함수Framework & Library/React 2021. 9. 22. 18:05
깊은 복사 함수의 사용 이유 ㆍ 자식 태그도 다시 렌더링을 해야 하는지 확인하는 연산의 최적화를 위해 사용한다. → 깊은 복사는 레퍼런스만 비교하기 때문에 효율적 spread 연산자 const a = [1, 2, 3]; const b = [...a]; // a의 값을 b 변수에 복사 b.push(4); // b의 값 변경 const c = [0, ...a, 4]; console.log(`a의 값은 ${a}`); // 1, 2, 3 출력 console.log(`b의 값은 ${b}`); // 1, 2, 3, 4 출력 console.log(`c의 값은 ${c}`); // 0, 1, 2, 3, 4 출력 concat 연산자 const a2 = [1, 2, 3]; const b2 = a2.concat(4); con..
-
React 기초 - React란?Framework & Library/React 2021. 9. 22. 17:58
React란? React란? ㆍ React는 데이터 변경을 감지해서 UI가 자동으로 업데이트되도록 하는 프레임워크이다. → Observer 패턴이라고 함 ㆍ 데이터 변경 감지를 위한 엔진이 필요하다. → node.js 서버를 사용 npm과 npx ㆍ npm과 npx는 의존성 관리 도구로, 자바로 비유하자면 maven, gradle과 같은 역할이다. ㆍ npm : 프로젝트 개수만큼 로컬에 다운로드한다. ㆍ npx : 다운로드한 라이브러리를 재사용하며, 해당 라이브러리가 없을 시 다운로드한다. React의 특징 ㆍ JavaScript 문법 안에 HTML 문법 사용이 가능하다. → JSX 문법이라고 함 ㆍ React에서 페이지 전환이란 Body의 내용을 변경하는 것이다. → Single Page Applica..