멀티캠퍼스 풀스택 과정/프론트엔드53 프론트엔드7-9. jquery cdn 이용하기 2022. 3. 16. 프론트엔드7-8.[React] hook *Hook은 React 버전 16.8부터 React의 요소로 추가되었다.* Hook: 기존 Class 없이 React의 기능을 사용할 수 있게 해준다. hook은 데이터를 유동적으로 바꿀 수 있다. userState 함수는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. hook은 React의 useState 훅을 사용하면 함수의 데이터 상태를 추적할 수 있다. Hook을 사용하기 위해서는 밑의 구문을 import 해줘야 한다. import React, {useState} from 'react'; 1. hook을 사용(버튼을 누르면 색과 성별이 변경된다. ) import React, {useState} from 'react'; function App() { // hook을 셋팅 co.. 2022. 2. 22. 프론트엔드7-7.[React] 함수 예제, props, 이벤트 처리 렌더링(Rendering) html 요소(element), 또는 React 요소 등의 코드가 눈에 볼 수 있도록 그려지는 것 1. JSON 으로 스타일 적용하기 function App() { /*스타일시트를 json을 작성해 적용하기*/ const style1 = { background : 'pink', padding : '20px', color : '#fff', marginTop : '10px', textAlign : 'center' }; return( Json 스타일 적용하기 ); } export default App; 2. 함수예제 function App() { /*스타일시트를 json을 작성해 적용하기*/ const style = { marginLeft : '10px' }; return( {1+1.. 2022. 2. 22. 프론트엔드7-6.[React] JSX를 이용하는 방법과 이용하지 않는 방법 JSX: react에서 HTML을 쉽게 작성할 수 있도록 하는 방법 2가지 1. JSX를 이용하는 태그 사용법 function App() { // JSX를 이용하는 태그 사용방법 const element1 = HTML은 문자열로 처리해야 한다.; // 변수안에 여러 값을 생성해서 넣을 수 있다. const element2 = ( 사과 딸기 ); // 내용을 감쌀 때 빈태그도 가능하다. const element3 = ( 해바라기 코스모스 ); return ( {element1} {element2} {element3} ); } export default App; 2. JSX를 사용하지 않는 태그 사용법 1. React 라이브러리에서 import하기 React의 라이브러리에서 React클래스를 가져다 쓴다는 .. 2022. 2. 21. 프론트엔드 7-5. [React] port 번호 변경하기 react 프로젝트를 실행할 때, 기본적으로 3000번 포트번호로 실행된다. 만약 다른 포트 번호로 변경하고 싶다면? -> React 프로젝트 폴더에 "package.json" 파일에 있는 script를 수정한다. -> React 앱을 실행시킨다. ex) npm start나 npm run start "start" : "react-scripts start", -> "start" : "set port=원하는 폰트번호 && react-scripts start", 로 변경한다. 2022. 2. 19. 프론트엔드7-4. [React] App.js를 통해서 화면 구성 react 프로젝트 생성 ( VS code에서) : Node.js와 react가 설치되었을 때 1. create-react-app 새로 만들 프로젝트명(폴더명) 폴더명을 적을때는 카멜 규칙은 안된다! ex) myReact xx my-react ok 2. 터미널에 새로 만든 프로젝트 경로까지 이동(cd 파일명) npm run start (npm start도 가능하다..) 3. React App 창이 뜨면 성공! 1. App.js에서 화면 구성해보기 리액트에서 함수 생성하기 function App() { // 리액트에서 함수 생성하기 function myWelcom(){ let hello = "안녕하세요"; if(true){ let hello = "hello!"; console.log(hello); } co.. 2022. 2. 19. 이전 1 2 3 4 ··· 9 다음
