[노트장] 적으며 정리해 보는 이론/리액트7 [리액트] useRef ◼ useRef useRef는 React에서 사용되는 특별한 훅(Hook) 중 하나입니다. 이 훅을 사용하면 함수형 컴포넌트 내에서 "참조(reference)"를 생성할 수 있습니다. 참조는 일종의 특별한 객체로, DOM 요소나 다른 React 요소에 접근하는 데 사용됩니다. useRef를 사용하여 생성된 참조는 컴포넌트의 렌더링과는 관련이 없으며, 컴포넌트의 생명주기와 관련된 일반적인 훅과는 달리, 컴포넌트의 전체 렌더링 과정과는 독립적으로 존재합니다. useRef를 사용하여 생성된 참조는 .current 속성을 통해 현재 값에 접근할 수 있습니다. 이 .current 속성은 초기에는 전달된 인자로 설정되며, 나중에 변경할 수도 있습니다. 일반적으로 useRef는 다음과 같은 목적으로 사용됩니다: DO.. 2024. 3. 28. [리액트] useState ◼ useState Hook의 한 종류 중 하나로, 상태(state) 관리합니다. 상태 관리라 하면, 입력값, 변수값 등 값을 저장해야 하는 저장하는 컴포넌트별 메모리를 state라고 합니다.컴포넌트의 렌더링 사이에 데이터를 state에 유지하고 새로운 데이터로 컴포넌트를 다시 렌더링 하는 데 사용하는 Hook입니다. 주의사항 - 함수 안에서 set 함수를 호출한 후 값을 업데이트 하여도 state 변수에는 여전히 호출 전 값이 출력됩니다. const [age, setAge] = useState(42); const [name, setName] = useState([]); function handleClick() { setAge(45); console.log(age); // 출력:42 setName([.... 2024. 3. 16. [리액트기초] Hook ◼ Hook이란 Hook은 React 16.8 버전부터 도입된 새로운 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해줍니다. 이전에는 클래스형 컴포넌트에서만 상태와 생명주기를 관리할 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 동일한 기능을 사용할 수 있게 되었습니다. Hook을 사용하여 상태를 관리하며 로직의 복잡성을 줄이고 재사용을 높이며 가독성 또한 쉽도록 만들어 줍니다. Hook의 종류 더 많은 종류가 있지만 여기서는 몇가지만 설명하겠습니다. useState: 함수형 컴포넌트에서 상태를 추가하고 관리하는 데 사용됩니다. useEffect: 컴포넌트의 렌더링 사이클과 관련하여 side effect를 수행하는 데 사용됩니다. 예를 들.. 2024. 3. 15. [리액트기초] style 입히기 ◼ style 입히기 리액트에는 style 라이브러리가 있어서 사용을 하지만 기본적으로 사용할수 있는 방법을 먼저 적어봅니다. React style 라이브러리 styled-components emotion Material-UI Ant Design Tailwind CSS 우선순위 인라인, css모듈, 외부 css, 프레임워크/ 라이브러리 css 등등 있있습니다. 1. 인라인 2. css모듈 3. 외부 css ◼ 인라인 스타일로 적용하기 const divStyle = { color: 'blue', backgroundColor: 'lightgray' // '-' 대신 카멜기법으로 작성한다 }; function App() { return ( Hello, World! // style에 연결하여 사용 ); } ◼ .. 2024. 3. 15. [리액트기초] Props : 전달 (children도) ◼ Props props는 상위부모에서 자식에세 값을 전달할때 사용됩니다.다른이름으로 사용해도 되지만 일반적으로 정해진 이름이 'props'이기에 가급적 따라가는게 좋습니다. props의 전달 방법과 받는 방법을 설명하겠습니다. props로 받기1. 왼쪽: 전달 / 2. 오른쪽: 받는1. Button component에 이벤트와, 문구를 전달을 하고있습니다.2. Button(props) => 전달해준 값을 props라는 통에 담아 가지고 온것입니다.그래서 객체구조 이기에 props.프로퍼티로 사용하여전달 받은 값을 다양한 방식으로 데이터를 처리하고 화면을 렌더링할 수 있습니다.// 전달 받은 구조props = { name : '클릭해주세요', event : con.. 2024. 3. 15. [리액트기초] 리액트 실행법과 index.js 버전 에러 ◼ 리액트 실행법 pakage.json 파일을 보면 script 실행하는 명령문으로, strart 부터 개발 서버 시작, 배포용으로 빌드, 테스트 실행, create-react-app 설정 추출 등의 명령입니다. 'npm start' 를 적으면 리액트가 실행됩니다. (+ npm run dev 도 실행 명령어로 특정한 개발 환경에서는 이 명령을 쓴다) ◼ 리액트 Index.js 리액트는 설치하는 버전에 따라 index.js의 작성법이 달라진다. 왼쪽은 18버전 이후, 오른쪽은 전이다. 만약 이런에러가 난다면, 18버전 전이기에 쓰는 코드를 바꿔야 합니다. import ReactDOM from 'react-dom/client'; import App from './App' const root = ReactDO.. 2024. 3. 15. [리액트기초] 리액트란? 설치와 구성소개 ◼ 리액트란 Facebook에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다 단일 페이지 애플리케이션(SPA)과 같은 대규모 웹 애플리케이션의 개발을 단순화하고, 효율적으로 관리할 수 있도록 돕는데 중점을 둡니다. JSX 문법을 사용하여 JavaScript 안에 HTML과 유사한 구문을 작성할 수 있습니다. 또한, 리액트는 기본적으로 component 기반이기에 파일을 쪼개서 만들고 다시 합쳐서 페이지를 구성합니다. React 관련 라이브러리 많은 라이브러리가 있지만 그 중에 몇가지만 찾아보았습니다. Redux 상태 관리를 위한 라이브러리로, 복잡한 상태를 효율적으로 관리하고 예측 가능한 방식으로 업데이트할 수 있습니다. React Router: 클라이언트 사이드 .. 2024. 3. 15. 이전 1 다음
