⭐ React (리액트) (22) 썸네일형 리스트형 11. props (변수, 함수 passing 하기) # props로 데이터를 전달한다. # props에서 데이터를 넘겨줄때 부모에서 자식으로 데이터를 넘겨준다. 자식에서 부모로 데이터를 전달해 줄수 없다. # 그래서 넘기는 데이터는 항상 상위 파일에서 데이터를 받게 하고, 상위 파일에서 데이터를 자식에게 넘겨주는 형태를 취해야 한다. # 추후에 Redux를 사용하여 관리하면 부모 자식의 데이터 연계 문제를 해결 할 수 있다. Redux는 Spring의 IoC 컨테이너 같은 존재로 모든 데이터를 일단 저장 후 다른 곳에서 요청을 하면 전달해 주는 개념이다. 1. Hompage.js 아래의 코드를 보면 중간에 // DB에서 다운로드 받았다고 가정한 데이터들이 존재 한다. 이 데이터들을 아래의 return 문으로 전달하고 전달된 데이터는 Home.js 파일로 .. 10. styledComponents 적용하기 # styledComponents를 적용하여 프로그래밍을 진행 styledComponents를 적용하여 프로그램을 구성하게 되면 장점은 js 파일안에서 간단한 문법으로 css까지 구현 가능하다. 한마디로 js 파일에서 css, javascript, html 까지 모두 하나의 페이지에서 구현이 가능하므로, 코드의 흐름을 파악하거나 가독성 측면에서 개선이 가능하다. Components 스타일로 구성하기 Components 스타일로 구성하게 되면 일단 재사용 가능한 Components들을 따로 나누어 적용이 가능하므로 코드가 간결해지고 가독성이 높아지는 효과가 있다. 보통은 헤더나 푸터 바디 정도로 나눌수 있는데 아래는 나눈 결과 이다. 1. 파일 구성 보기 2. App.js import LoginPage f.. styled-components를 외부 파일에 적용 후 반영하기 # styled-components를 외부 파일에 적용하여 App.js에 적용하는 방법 1. MyCss.js 파일을 작성 import styledComponents from 'styled-components'; const Title = styledComponents.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; export { Title }; 2. App.js에 적용 // css 파일 임포트 import './App.css'; import { Title } from './MyCss'; function App() { return ( {/* css 영역의 값을 아래에 적용 */} 헬로 ); } export default App; 3. .. 리액트 기본 구조 자동으로 생성하기 (rsc 사용) # 기본 구조 생성하기 예를들어 Header.js 파일을 신규로 생성하여 기본 구조를 잡고자 할때 rsc 명령어를 입력 후 tab 키를 누르면 아래와 같이 기본 구조를 갖춘 .js 파일이 생성이 된다. import React from 'react'; const componentName = () => { return ( ); }; export default componentName; 위에서 componentName만 변경하여 새로운 내용을 코딩하면 간편하게 작성 할 수 있다. yarn 및 styled-components 설치하기 # yarn 및 StyledComponents 설치 1. yarn 설치 npm install -g yarn 2. styled-components 설치 npm install --save styled-components 3. styled-components 적용 // css 파일 임포트 import styledComponents from 'styled-components'; import './App.css'; // css 영역 const Title = styledComponents.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; function App() { return ( {/* css 영역의 값을 아래에 적용 */} 헬로 ); } e.. 9. useRef # useRef useRef 란? useRef란 특정 DOM을 선택할 수 있게끔 해주는 기능을 가진 녀석이다. 리액트를 사용할때 간혹 DOM을 직접 선택해서 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야하던지 다양한 상황이 있을때 사용을 한다. DOM 이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. // useRef (디자인) import { createRef, useRef, useState } from 'react'; /.. 8. useMomo # 특정 함수가 특정 시점에 실행되도록 메모라이제이션 하는 역할 인거 같다. import { useMemo, useState } from 'react'; function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState('합계'); // 함수 선언 const getAddResult = () => { let sum = 0; list.forEach((i) => (sum = sum + i)); console.log('sum 함수 실행됨', sum); return sum; // 함수의 결과값을 반환한다. (여기서는 sum 함수의 결과값을 반환한다.) }; // usememory 사용하기, getAddResu.. 7. useEffect (import & export) # useEffect useEffect란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. - 파일 import & export 의 개념 정리(7강에 정리 되어 있음 - 다시 정리 해야 됨) import { useEffect, useState } from 'react'; import './App.css'; function App() { const [data, set.. 이전 1 2 3 다음
