리액트 노드 값 주고받기 리액트 useEffect(() => { const fetchData = async () => { const response = await fetch('/list/company', { method: 'POST', headers: { "Content-Type": "application/json", }, // json형태의 데이터를 서버로 보냅니다. body: JSON.stringify({ id: title }) }) const json = await response.json(); setFarm(json); }; fetchData(); }, []); 노드 app.post('/list/company', (req, res) => { console.log("리퀘 바디 : "+req.body..
모달창에 글제목 title state 가져다 쓰고 싶음. but 다른 함수 이기에 갖다 쓸수 없음 = state 문법 쓰기 부모-> 자식에게 state 전송하는 방법 1. 부모컴포넌트 // 문자로 보내고 싶음 작면 = "문자" 2. 자식컴포넌트 -props 파라미터 등록 후 props. 사용 function Modal(props) { return ( {props.작명[0]} 날짜 상세내용 ) } props 전송은 부모에서 자식만 가능 x // state 는 사용하는 컴포넌트들 중 최상위에 만드셈 더보기 완성 코드 /* eslint-disable */ import './App.css'; import { useState } from 'react'; function App() { let [title, titl..
리엑트 중괄호 안에서는 for 문 사용 불가 map 함수 사용 { // state 개수만큼 생성 // map 함수 안의 파라미터는 2개까지 title.map((a, i ) => { return ( { title[i] } // { a } 2월 17일 발행 ) }) } 따봉 개수 늘리기 let [like, likeFunction] = useState([0,0,0]); ... { let copy = [...like]; copy[i] = copy[i] + 1; likeFunction(copy) }}> 👍 {like[i]}
동적인 UI 만드는 3 step 1. html css 로 미리 디자인 완성 function Modal(){ return( 제목 날짜 상세내용 ) } 2. UI 의 현재 상태를 state 로 저장 // false : 안보이는 상태, true : 보이는 상태 ~ 자유롭게 작성가능 let[modal, setModal] = useState(false); 3. state 에 따라 UI 가 어떻게 바뀔지 작성 { setModal(!modal) }}>{title[2]} App 내에서 js 사용불가 - HTML 내용 들어가는 공간이기 때문에 - 그럼 어떻게? => 삼항연산자 사용 (ternary operator) { // App 내에서 js 사용불가 - 삼항연산자 사용 modal == true ? : null }
컴포넌트란 ? 공식문서 : React.Component – React (reactjs.org) React.Component – React A JavaScript library for building user interfaces ko.reactjs.org 빡대가리식 설명 더보기 HTML 특징 : 더러움 - div 같은 태그 너무 많아짐 react 는 html 덩어리를 한 단어로 축약 할 수 있는 기능을 제공함 = component 컴포넌트 만드는 법 1. function 만들기 -대문자 시작 작명 Component Rule - function App() 외부에서 만들어야 함 2. return 안에 html 담기 - 하나의 태그 안에서 끝나야 함 - 그래도 병렬 해야 할때는.. ? -- react 는 제공해..
App.js 에서 사용되는 html 문법은 사실 JSX 임 -JSX = .js 파일에서 쓰는 html 대대품 react 에서 html 내용은 return ( 여기 안에만 작성 가능 ) JSX 문법 정리 1. CSS Class 명 설정 class 대신 className 2. 변수 넣을 때는 {중괄호} {/* document.querySelector('h4').innerHTML = post; js 기본 문법 */} id = {post} 데이터 바인딩 = 원하는 곳에 데이터 꽂을 수 있음 3.style 넣을 때 object 형으로 중괄호 안에 넣어줘야 함 //이렇게 쓰면 안댐 style = "color : red " 주의 : font-size 안됨 = js 이기때문에 - 기호가 안되서 fontSize 같이 다..
F1 > settings.json (user) > "emmet.syntaxProfiles": { "javascript": "jsx" }, "emmet.includeLanguages": { "javascript": "html" }
리액트 쓰는 이유 Single Page Applicaion 만들기 위해 새로고침 없이 동작하기 위해, 앱처럼 부드럽게 동작하는 html 페이지 (instagram 같이) 생 Js 도 가능하지만 코드가 길어짐 Vue 등도 있지만 React 가 가장 틀딱이라 사용자가 많음 React 쓰면 html 재사용이 편리함 React Native 로 앱개발도 가능 리액트 설치하기 1. 노드 js 설치 - 왜 노드.? = 리액트 설치 편하게 할려면? = npm = nodeJS 설치하면 딸려옴 ( Node.js #설치 #npm #get#post#how to show HTML — LLAT (tistory.com) ) 2. create-react-app 사용할 디렉토리 폴더 vscode 로 열고 create-react-app..
