강의 실습/한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지63 React에서 배열 사용하기 1 - 리스트 렌더링 (조회) Array.map((it) => ) 1. React에서 리스트 렌더링 하기 세부 목표) - 배열을 이용하여 React 에서 LIST 를 렌더링 해보고 개별적인 컴포넌트로 만들어보기 - 터미널 npm start 랜더링 : 화면에 표시한다. 일기 리스트를 랜더링 할 컴포넌트 src\DiaryList.js 생성. - DiaryList.js const DiaryList = () => { return ( 일기 리스트 ); }; export default DiaryList; App.js 에도 등록 후, 임시 배열 데이터 생성 후 diaryList 라는 이름의 props 로 전달한다. 이후 DiaryList.js 에서 받기. - App.js import './App.css'; import DiaryEditor fro.. 2024. 1. 15. React에서 DOM 조작하기 - useRef useRef 1. React에서 DOM 조작하기 세부 목표) - 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus 하기 - 터미널 npm start 작성자를 1글자 이상 입력하지 않았을 때, 일기 본문을 5글자 이상 입력하지 않았을 때 alert 창 띄우고 함수 강제 종료시키기. - DiaryEditor.js import { useState } from "react"; const DiaryEditor = () => { // state 기본값 설정 const [state, setState] = useState({ author: "" , content: "" , emotion: 1 }) // 이벤트 함수 const handleChangeState = (e) =.. 2024. 1. 14. React에서 사용자 입력 처리하기 useState with simple_diary 폴더 만든 후 vscode 에서 Open Folder 로 열기. (필요하면 zoom in) - 터미널 npx create-react-app simple_diary Creating a new React app in D:\개발\simple_diary\simple_diary. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1484 packages in 1m 250 packages are looking for funding run `npm fund` for details Git.. 2024. 1. 13. 프로젝트 소개 일기장 만들어보기 (One Page Application Project) 간단한 프로젝트를 통해 React의 사용법을 배워 보기 Point 1. 사용자 입력 및 배열 리스트 처리하기 Point 2. React Lifecycle 과 API Point 3. React App 프로처럼 성능 최적화하기 with 도구 사용 Point 4. React 컴포넌트 트리에 전역 데이터 공급하기 이번 섹션 완주하면, Todo 리스트, 심리 테스트, 랜딩 페이지 같은 간단한 One Page 프로젝트를 리액트를 통해 개발할 수 있는 실력 갖추게 된다. 참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8# 한입 크기로 잘라 먹.. 2024. 1. 11. Props 컴포넌트에 데이터를 전달하는 방법 1. Props Props : 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값들에 이름을 붙여 전달하는 방식. 프로퍼티스의 줄임말. - App.js // import logo from './logo.svg'; // import './App.css'; import MyHeader from './MyHeader'; import Counter from './Counter'; function App() { return ( ); } export default App; - Counter.js import React, { useState } from 'react'; const Counter = (props) => { console.log(props); // 객체에 담겨서 온다. cons.. 2024. 1. 10. State React State 1. State State : 계속해서 변화하는 특정 상태. 상태에 따라 각각 다른 동작을 함. 리액트에서 말하는 상태는 계속 값이 바뀌는 동적인 데이터. 상태를 바꾸는 등의 관리는 이걸 가진 컴포넌트가 직접 관리한다. Counter 예제 실행을 위해 src 폴더에 Counter.js 파일 생성 - Counter.js import React, { useState } from 'react'; const Counter = () => { console.log("Counter 호출!"); // 0에서 출발 // 1씩 증가하고 // 1씩 감소하는 // count 상태 const[count, setCount] = useState(0); // 비구조화 할당 - 0 : 상태값, 1 : 상태값을 변.. 2024. 1. 10. JSX HTML with Javascript 1. JSX with React JSX 는 리액트의 컴포넌트를 만드는데 유용하게 사용되는 문법. - 터미널 npm start Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000 On Your Network: http://172.30.1.15:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully 헤더 역할을 하는 컴포넌트 MyHeader.js 파일 생성 후 App.js 에서 .. 2024. 1. 9. Create React App React App을 세상에서 가장 빠르고 편하게 만드는 방법 1. React App을 만드는 방법 React.js : Node 기반의 Javascript UI 라이브러리 Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 ... 언제 다 설정하지..? Create React App : 이미 세팅 완료된 패키지 Boiler Plate - 보일러를 찍어내는 틀, 마치 보일러를 찍어내듯, 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지를 의미함(리액트에 사용하는 패키지를 미리 설치하고 복잡한 환경설정까지 다 해놓은 패키지를 감싼 패키지). reactexam1 폴더 생성 후.. 2024. 1. 8. Why React? React는 왜 필요한걸까? 1. Why React? 첫 번째 이유 : React 는 Component 기반의 UI 라이브러리 - index.html 여기는 HOME 입니다 다른 페이지에서도 공통적으로 사용할 거라고 예상되는 요소들을 별도의 파일이나 모듈로 제작한 뒤, 필요한 파일이나 페이지마다 컴포넌트의 이름으로 불러오는 방식을 사용하면 눈에띄게 코드량이 줄어든다. 이렇게 재사용되는 요소들을 컴포넌트로 만들어 사용하는 방식을 '컴포넌트화 방식'이라고 부른다. 컴포넌트화 방식을 사용하면 수정해야할 컴포넌트 하나만 수정하면 그 컴포넌트를 사용하는 다른 파일들을 다 수정할 필요 없이 적용된다. 산탄총 수술을 할 필요가 없어진다. 유지보수가 쉬워진다. React는 Component 기반 UI 라이브러리 이기 .. 2024. 1. 7. 이전 1 2 3 4 5 6 7 다음
