다른 온라인 강의4

• 

  끝) update, delete UPDATE 진행할 작업 update 기능 추가하기.  contextControl = { event.preventDefault(); setMode('UPDATE');}}>Updateelse if (mode === 'UPDATE') { let topic = topics.find(p => p.id === id); // topic이 존재하는지 예외처리는 여기서 스킵 content = { // Update는 기존의 값을 볼 필요가 있으므로 Update 컴포넌트는 기존의값을 가지는 props를 가져야한다. // 그래야 컴포넌트를 실행할때 [렌더링할때] 해당 props를 사용하여 렌더링해줄수있기 떄문. //onUpdate에는 수정된 title,body를 이용하여 적용하.. 다른 온라인 강의/생활코딩- React 2022년 개정판 2024. 6. 18.

• 

  3) state, create State컴포넌트에서 Prop은 전달인자 return은 반환값이다.동적으로 컴포넌트의 내용을 바꾸기 위해서는 State를 이용한다.state의 값이 바뀌면 컴포넌트가 다시 실행되어서 return의 구성이 변경될수있고, 새롭게 렌더링 된다. + gptProp과 State에 대한 설명Prop (Properties)전달인자: Prop은 컴포넌트가 외부로부터 전달받는 데이터입니다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용됩니다.불변성: Prop은 컴포넌트 내에서 변경할 수 없습니다. 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 Prop을 읽기 전용으로 사용합니다.사용 예: 에서 title과 body가 Prop입니다.State내부 데이터: State는 컴포넌트가 관리하는 내부 데이터입니다. Sta.. 다른 온라인 강의/생활코딩- React 2022년 개정판 2024. 6. 18.

• 

  2 ) 컴포넌트 생성 , props , 이벤트 App.jsimport logo from './logo.svg';import './App.css';function App() { return ( WEB html css js WelCome Hello, Web );}export default App; app.js는 싱글 페이지 애플리케이션의 주요 컴포넌트 중 하나입니다.이 파일은 보통 리액트 애플리케이션의 진입점(entry point) 역할을 하며, 전체 애플리케이션의 구조를 정의하고.. 다른 온라인 강의/생활코딩- React 2022년 개정판 2024. 6. 18.

• 

  1 ) 리액트 프로젝트 구조 리액트 프로젝트 구조  각 파일과 폴더의 역할node_modules/: 현재 프로젝트에 설치된 모든 npm 패키지가 들어 있는 디렉터리입니다. 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리지 않습니다. public/: 정적 파일이 들어 있는 디렉터리입니다. index.html 파일과 애플리케이션에 필요한 기타 정적 파일들이 포함되어 있습니다.  컴파일이 필요 없는 파일들이 위치하는 폴더입니다. src/: 소스 코드가 들어 있는 디렉터리입니다. 이 디렉터리에서 React 컴포넌트, 스타일시트, 테스트 파일 등이 포함됩니다. 리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됩니다.App.js: 메인 애플리케이션 컴포.. 다른 온라인 강의/생활코딩- React 2022년 개정판 2024. 6. 18.