실습을 하던 중 이제 props로 부모에서 자식으로 데이터를 전달 해줘야한다. 그래서 이 데이터 전달에 대한 코드만 적겠다.이는 todo인데, 이제 Header, Todo, Footer 이렇게 있는데, 전달은 Todo를 통해 자식에게 전달해준다.  이것은 Todo.jsx 쇼핑 목록 여기를 보면 TodoInput과 TodoList가 있다.그리고 TodoList안에 TodoItem에 있기에 둘다 전달해줘야 한다. 아래와 같이 전달 받으면 되는데, 여기서 문제가 있는게, 만약 함수를 전달한다. 그러면 함수에 return값이 없다면 undefined로 되어, 어떠한 작동도 하지 않을 것이다. 그래서 전달할 때는 저렇게 이벤트를 통해 전달하여 저 이벤트가 ..

import 불러오기import App from './App'; 여기에import from ‘./App’; 인데 이름의 경우는 임의로 지정할 수 있는데, 변수랑 겹치지 않는 이름으로 하는 것이 좋다.만약에 App안에 App이라는 변수가 선언이 되어있다면, 변수가 2개가 되기 때문에 충돌이 날 수도 있으므로, 겹치지 않는 이름으로 지정한다. 변수 importimport App, { message } from ‘./App’변수명은 변경할 수 없다. 파일에서 불러오기라서 변경이 불가능import App ← 이 부분은 변경이 가능 export 내보내기기본 내보내기는 기본 구문으로 변수 한개만 내보내기가 가능하다.export default App 만약 변수를 내보내기 한다면,첫 번째 방법const message..

// 1) Import the React and ReactDOM librariesimport React from 'react';import ReactDOM from 'react-dom/client';// 2) Get a reference to the div with ID rootconst el = document.getElementById('root');// 3) Tell React to take control of that elementconst root = ReactDOM.createRoot(el);// 4) Create a componentfunction App() { return ;}// 5) Show the component on the screenroot.render(); 위 기본적인 틀이다..

리액트에서 컴포넌트를 스타일링 할 땐느 다양한 방식이 있다. 여러 방식 중에 딱히 정해진 방식은 없다. 회사마다 요구하는 스펙이 다르고, 개발자마다 각자 취향에 따라 선택하기 때문이다. 방식은 크게 4가지가 있다. 1. 일반 CSS : 컴포넌트를 스타일링 하는 가장 기본적인 방식 2. SASS : 자주 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있음 3. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다. 4. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 ..

Hooks은 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다. 1. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다. import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} setValue(value + 1)}>+1 setValue(value - 1)}>..

모든 리액트 컴포넌트에는 라이프사이클(수명주기)가 존재하다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도 있고, 불필요한 업데이트를 방지해야 할수도 있다. 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이플사이클 메서드는 클래스형 컴포넌트에만 사용 할 수 있다. 함수 컴포넌트에서는 사용할 수 없어서, 그 대신에 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 1. 라이프사이클 메서드의 이해 라이플사이크 메서드의 종류는 총 9가지 이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 D..