728x90 개발/React6 React 6. Create 구현하기! 우리가 이번시간에 구현해볼 내용은 Create 버튼을 만들어 1번,2번,3번 외에 4번을 추가하는 기능을 하는 Create를 구현해 볼겁니다 ~ 1. Create를 추가 해주기 위해서 우리는 현재까지 사용하던 방법mode를 바꾸는 방식으로 해보겠습니다. 추가해줄소스) 우리가 계속 이용하던 mode의 CREATE부분을 추가해주어야 합니다. if (mode === 'WELCOME'){ // 만약 모드가 'WELCOME' 이라면 content에 Article을 담아줍니다. content = }else if(mode === 'READ'){ let title, body = null; // 타이틀과 바디의 값 초기화 // for문은 이용하여 위에 topics값에서 해당 id값에 맞는 값을 찾는다. for(let i.. 2023. 4. 23. React 5. State React의 State - React에서 State는 컴포넌트 내에서 관리되는 데이터의 상태를 나타냅니다. - State는 컴포넌트의 라이프사이클 동안 변경될수 없으며, 변경될 때 마다 컴포넌트는 다시 렌더링 됩니다. - 컴포넌트의 내부에서만 사용되며, 다른 컴포넌트에 props로 전달될 수 있습니다. - 다른 컴포넌트에서 변경될 수 없으며, 변경이 필요한경우 props를 통해 전달된 콜백 함수를 호출하여 부모 컴포넌트에서 State를 업데이트 해야합니다. React 4에서 사용하던 소스 그대로 시작 해보겠습니다. 저는 현재 페이지에서 1.html 2.css 3.javascript 1,2,3번 클릭 하였을때 본문에 내용이 바뀌는걸 해보려합니다. 잘따라오세요 ~ 1. 일단 State를 설명하기전 이해를 돕.. 2023. 4. 23. React 4. props 와 event prop와 event를 함께 보시죠 - 컴포넌트에 속성값을 넣을수 있는 props에 대해 공부 - 이벤트는 말그대로 이벤트가 발생 되었을때 어떤한 역할을 해주는것 입니다. 1. React 3.에서 마지막에 완성 했던 소스 import logo from './logo.svg'; import './App.css'; //사용자 정의 테그 만들기 (컴포넌트) function Header(){ return WEB } function Nav(){ return html css js } function Article(){ return 웰컴 ~~ Hello, Web } function App() { return ( ); } export default App; 2. props를 사용 해보겠습니다. import logo f.. 2023. 4. 23. React 3. 컴포넌트 만들기 ✅ React 에서의 컴포넌트란? React에서 컴포넌트는 재사용성과 유지보수성을 높이는 데 중요한 역할을 합니다. 하나의 컴포넌트를 여러 곳에서 사용할 수 있으며, 각 컴포넌트는 독립적으로 작동하므로 유지보수가 용이합니다. 👀 컴포넌트 만들기 시작 ! 1. 기본 소스를 컴포넌트로 만들어보겠습니다. App.js소스 코드) import logo from './logo.svg'; import './App.css'; //사용자 정의 테그 만들기 (컴포넌트) function Header(){ return WEB } function Nav(){ return html css js } function Article(){ return 웰컴 ~~ Hello, Web } function App() { return ( );.. 2023. 4. 23. React 2. 소스 코드 수정 방법 1. index.js파일에서 기본적인 수정이 가능합니다. 들어가서 확인 해봅시다. 2. 처음 설치 했을때 기본적으로 보여지는 페이지입니다. 수정 해볼까요? -> 2-1 2-1. 수정을 위해 소스코드를 찾아가봅시다. 위 코드를 수정 해보았습니다. (React는 3000port를 사용 하네요 .) 3. CSS는 어디서 설정할까요?? 여기서 수정이 가능합니다. 수정을 한번 해보겠습니다. App.css 파일에서 background-color과 color 글자색을 바꿔 보았습니다. 다음은 실제 HTML 소스를 간편하게 컴포넌트를 만들어 보겠습니다... 2023. 4. 21. React 1. 내 노트북에 환경설정하기 https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 위 홈페이지에서 1. "시작하기" 누르기 ! 2."새로운 React 앱 만들기" 클릭 3."Create Reacy App" 클릭 4. 명령어로 설치 하기 (nodejs가 설치 되어 있어야합니다) - npx create-react-app [프로젝트폴더명] - cd [프로젝트 폴더경로] - npm start 5. npm start : 서비스 시작 - 명령어 사용시 윈도우 명령 프롬프트(CMD)에서 명령어를 실행 시켜 주시면 됩니다. ⁂단, 명령어 실행.. 2023. 4. 21. 이전 1 다음 728x90
