1장: 리액트 기초 편
리액트의 기초 문법과 핵심 개념을 익힌다.
01 수업 소개
리액트를 소개하고 리액트 라이브러리의 필요성을 이해한다.
https://lshjju.tistory.com/109
React.js about - 리액트 정의
React의 정의React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. Facebook(현 Meta)에서 개발하였으며, 단일 페이지 애플리케이션(SPA)의 UI를 효율적으로 구현하는 데 중점을 두
lshjju.tistory.com
https://lshjju.tistory.com/347
React basic manual
리액트 필수 매뉴얼 모음Component컴포넌트는 React의 핵심 개념으로, 웹 페이지의 사용자 인터페이스(UI)를 재사용 가능한 독립적인 단위로 분할하는 역할을 수행합니다. 이는 마치 레고 블록을 조
lshjju.tistory.com
02 실습 환경 구축
리액트 실습 환경을 구축하는 법을 배우고, 기본 샘플 앱을 구동하는 방법을 익힌다.
my directory setting
앱과 프로젝트 셋팅에서 디렉토리가 간결해지면 코딩 효율이 좋아집니다.그러기 위해 에디터, 디비, 프로젝트, 서버, 라이브러리 등을 내가 통제하기 쉬운 패스로 설정하겠습니다.디렉토리를
lshjju.tistory.com
위 포스팅에서 React project directory 매뉴얼 참고해서 프로젝트 디렉토리 생성 합니다.
VS Code install and project load
vs code install https://code.visualstudio.com/우측 상단 다운로드 버튼좌측 윈도우스 10 11 큰 버튼 저장 설치 동의 - 다음 설치위치선택 패스 안 바꿔도 됨 다음 시작메뉴폴더선택 패스 안 바꿔도 됨 다음
lshjju.tistory.com
vs code를 사용중인 개발자라면 이 부분은 패스해도 됩니다.
Visual studio code extension recommendation and manual - vs code 익스텐션 추천
확장팩 설치 매뉴얼 vs code exetension installvs code 확장기능 설치 - 웹표준 기준 레프트 하단 익스텐션 메뉴 클릭 네모난거 네개 익스텐션 화면 위 검색창에 테스트로 html css support 검색 롸잇트 인스
lshjju.tistory.com
이 프로젝트에서 익스텐션 인스톨은 옵션입니다.
프로젝트에서 특별하게 사용하는 익스텐션이 없습니다.
그러므로 참고만 하고 인스톨 안해도 됩니다.
https://lshjju.tistory.com/105
Node.js install
Node.js?React를 시작하려면 Node.js가 설치되어 있어야 합니다. 그 후 에디터 터미널에서 Create React App을 사용하여 새 프로젝트를 생성할 수 있습니다:Node.js는 한마디로 JavaScript를 웹 브라우저 환경이
lshjju.tistory.com
https://lshjju.tistory.com/107
react new project building - VS Code에서 React 프로젝트 생성하기
VS Code에서 React 프로젝트 생성하기VS Code 실행합니다. 디렉토리를 미리 만들어 둡니다.C:\Users\tj\Downloads\react-app 왼쪽 탐색기에서 디렉토리 엽니다. 디렉토리 오픈된 상태에서상단 메뉴에서 '터미
lshjju.tistory.com
03 소스 코드 수정 방법
리액트 앱을 수정하는 법을 배우고, 애플리케이션을 배포하는 법을 배운다.
https://lshjju.tistory.com/126
React.js deploy - 리액트 배포하기
React 프로젝트 배포배포는 개발이 완료된 React 애플리케이션을 사용자들이 접근할 수 있도록 웹에 올리는 과정입니다.프로젝트 빌드하기터미널에서 기존 작업 종료 합니다.터미널에 기존 작업
lshjju.tistory.com
https://lshjju.tistory.com/111
egoing - React - Directory scan
리액트 디렉토리 구조new 프로젝트 생성 구조를 확인하기 위해 코드샌드박스로 리액트 프로젝트를 하나 생성 합니다. https://lshjju.tistory.com/143 code sandbox manual - 코드샌드박스로 리액트 프로젝트
lshjju.tistory.com
04 컴포넌트 만들기
리액트에서 제공하는 컴포넌트의 역할과 필요성을 이해하고, 리액트 컴포넌트를 작성하는 법을 배운다.
https://lshjju.tistory.com/113
egoing - React - component
HTML 태그를 펑션으로 분리하고 조립 합니다.new project building다양한 이슈로 프로젝트는 코드샌드박스로 진행 합니다.뉴 프로젝트 빌딩 합니다.컴포넌트 빌딩 합니다./* null */ styles.css 스타일 코드
lshjju.tistory.com
https://lshjju.tistory.com/128
React.js component - 리액트 컴포넌트
React ComponentReact를 배우면서 가장 먼저 만나게 되는 중요한 개념이 바로 **컴포넌트(Component)**입니다.React는 웹 애플리케이션의 사용자 인터페이스(UI)를 만들 때 이 컴포넌트들을 조립해서 사용합
lshjju.tistory.com
05 props
props를 이용해 리액트 컴포넌트의 재사용성을 높이는 방법을 배운다.
https://lshjju.tistory.com/115
egoing - React - props
헤더/아티클에 데이터 출력 합니다.펑션헤더에 프롭스로 데이터 바인딩 합니다.export default function App() { return ( );} Completion 펑션앱 리턴 헤더태그타이틀 추가합니다.function Header(props) { console.log("p
lshjju.tistory.com
https://lshjju.tistory.com/117
egoing - React - props - array
펑션네브에 어레이데이터 전달 합니다.단순한 데이터만 바인딩 할 수 있다면 재미 없습니다.어레이도 바인딩할 수 있어야 합니다.어레이 데이터 바인딩을 실습해 봅니다.그러려면 약간의 콘트
lshjju.tistory.com
https://lshjju.tistory.com/129
React.js props - 리액트 프롭스
Props의 정의Props는 "properties"의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 컴포넌트 간에 데이터를 주고받을 수 있게 해주는 React의 핵심 개념이라고 할 수 있
lshjju.tistory.com
06 이벤트
컴포넌트 이벤트를 만들고 활용하는 법을 배운다.
https://lshjju.tistory.com/118
egoing - React - event
헤더 탭하면 알림창 띄우는 이벤트 추가 합니다.헤더 이벤트 추가 합니다.export default function App() { const topics = [ { id: 1, title: "html", body: "html is ..." }, { id: 2, title: "css", body: "css is ..." }, { id: 3, title: "
lshjju.tistory.com
https://lshjju.tistory.com/130
React.js event - 리액트 이벤트
EventEvent(이벤트)는 웹 페이지에서 발생하는 사용자의 행동이나 시스템의 변화를 의미합니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임, 페이지 로딩 등이 모두 이벤트에 해당합니다. Re
lshjju.tistory.com
07 state
state의 역할과 필요성, 사용법을 이해한다.
https://lshjju.tistory.com/121
egoing - React - state
네브/로고 탭하면 각각 해당 데이터 출력 합니다.export default function App() { const mode = "WELCOME"; const topics = [ { id: 1, title: "html", body: "html is ..." }, { id: 2, title: "css", body: "css is ..." }, { id: 3, title: "javascrip
lshjju.tistory.com
https://lshjju.tistory.com/131
React.js state - 리액트 스테이트
StateState는 React 컴포넌트 내에서 변경 가능한 데이터를 관리하는 객체입니다. 쉽게 말해, 컴포넌트의 "기억 장치" 역할을 하며 사용자 상호작용이나 네트워크 응답 등에 따라 변할 수 있는 값들
lshjju.tistory.com
08 Create
앱의 CRUD 기능 가운데 Create 기능을 구현한다.
https://lshjju.tistory.com/124
egoing - React - create
글쓰기 기능 만들기유저 글쓰기 유아이 빌딩 합니다.export default function App() { const [mode, setMode] = useState("WELCOME"); const [id, setId] = useState(null); const topics = [ { id: 1, title: "html", body: "html is ..." }, { id: 2,
lshjju.tistory.com
09 Update
앱의 CRUD 기능 가운데 Update 기능을 구현한다.
https://lshjju.tistory.com/125
egoing - React - update
글 수정 기능 만들기상세페이지에서만 업데이트 링크가 노출되도록 합니다.export default function App() { const [mode, setMode] = useState("WELCOME"); const [id, setId] = useState(null); const [nextId, setNextId] = useState(4); c
lshjju.tistory.com
10 Delete & 수업을 마치며
앱의 CRUD 기능 가운데 Delete 기능을 구현한다.
https://lshjju.tistory.com/132
egoing - React - delete
데이터 삭제 후 홈으로 이동합니다.else if (mode === "READ") { let title, body = null; for (let i = 0; i ; contextControl = ( { event.preventDefault(); setMode("UPDATE"); }} > Update { const newTopics = []; for (let i = 0; i ); } Completi..
lshjju.tistory.com
'React.js' 카테고리의 다른 글
| 생활코딩! React 리액트 프로그래밍 2345678장 (0) | 2026.07.03 |
|---|---|
| 생활코딩! React 리액트 프로그래밍 Warming up (0) | 2025.06.20 |