블로그 블로그

CSS 모듈 Inline 스타일 설정 const [isValid, setIsValid] = useState(true); {/* 인라인 스타일로 값이 isValid가 아닐 경우 RED 로 아닌경우 BLACK으로 설정 */} Course Goal { // return ( // // {props.children} // // ); // }; export default Button; 속성 전달 동적인 속성전달 //함수는 매개변수로 props를 받고 이 위치에 텍스트 반환 invaild const FormControl = styled.div` margin: 0.5rem 0; & label { font-weight: bold; display: block; margin-bottom: 0.5rem; color: ${(p..

이벤트 리스닝 및 이벤트 헨들러 function 사용법 button에 props(속성추가) 함수를 생성하여 버튼의 속성에 함수 추가하면 클릭시 실행된다 //1 //함수 이름은 clickHandler처럼 짓는다 function clickHandler() { //실행할 내용 입력 console.log('clicked!!'); } //2 const clickHandler = () => { console.log('clicked!!'); } // return부분 Change Title useState 상태변경을 위해 useState사용 //useState 불러오기 import React, {useState} from "react"; //useState는 함수 안에서 호출되어야 한다(중첩된 함수 안에서 호출할 수 ..

리엑트 https://www.udemy.com/course/best-react/ 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 리엑트를 사용하여 좀더 간단히 사용자 인터페이스를 구축할 수 있다 모든 building block 컴포넌트로 이루어져 있다 모든 사용자 인터페이스는 컴포넌트로 나눌 수 있다 컴포넌트- 재사용가능, 우려사항 분리 컴포넌트에서 html, css, javascript결합하여 사용자 인터페이스 구축 리엑트에서는 자바스크립트처럼 직접 구체적인 DOM을 업데이트하는 지침을 작성할 필요가 없다 대신 최종 상태와 어떤 상황에서 어떤 상태가 사용되는지 정의하면 된다 개발환경, 설치 node.js 설치 npx create-react-app my-app cd my-app npm start 실행..

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com api 연동 방법 https://wonit.tistory.com/304 [React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API) 우리가 일반적인 자바스크립트에서 API를 연동하기 위해서는 보통 fetch-Api를 사용하곤 했다. 리액트 또한 자바스크립트 built-in 라이브러리중 하나인 fetch-api또한 훌륭한 ..

react import React, { useState } from "react"; import "./style.css"; function App() { //기본값이 1인 number state정의 const [number, setNumber] = useState(1); return ( Root : {number} //number값 { setNumber(number + 1); }} > ); } function Left1(props) { return ( Left1 : {props.number} ); } function Left2(props) { return ( Left2: {props.number}//1 ); } function Left3(props) { return ( Left3: {props.numbe..

https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 React 2022 개정판 www.youtube.com 사용자 정의 태그 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 온라인 코드 편집기 https://stackblitz.com/edit/react-prfxjb React (forked) - StackBlitz stackblitz.com 추천 툴체인 https://ko.reactjs.org/docs/create-a-new-react-app.html..

실습환경 cmd npx create-react-app 프로젝트이름 vscode 실행 code . npm start 실행 app.js에서 내용 수정 package.json "scripts": { "start": "react-scripts start", //개발모드 실행 "build": "react-scripts build", //실제 베포모드 "test": "react-scripts test", // 테스트 "eject": "react-scripts eject" //웹페이지, vavel설정 변경시 사용 }, component 컴포넌트 이름 항상 대문자로 시작 App.js import "./App.css"; function App() { const name = "Tom"; //변수생성 const naver ..