presentLee

화살표함수 function App() { 를 const App = () => { 로 function ExpenseItem(props) { const ClickHandler=()=>{ console.log('clicked'); } return ( {props.title} ${props.amount} button! ) } 태그 속에 on이벤트명 ={함수} 형식으로 사용. 하지만 위와같은 방식으로 화면에 출력되는 내용을 바꾸기는 불가능. 변수의 값을 바꾼다고 해서 컴포넌트를 새로 로드하는것은 아니기때문 그럴때 useState를 사용 import {useState} from 'react' 후에 컴포넌트 함수 속에 const [name , setName] = useState(props.something) 형식으로..

웹/react 2023. 2. 28. 02:56

둥글모서리에 옅은 그림자가 있는 상자 디자인을 Card 라고 함. 이 디자인을 위한 스타일 코드가 중복 되고 있음. Card를 위한 컴포넌트를 새로 작성하고 중복되는 스타일을 css파일로 만듦 그리고 Card 디자인을 사용하는 컴포넌트를 감싸고 있는 div 태그를 Card 태그로 교체한다. 그렇지만 새로 제작한 컴포넌트는 다른 태그를 감싸는 래퍼로써 사용할 수 없기때문에 div 태그를 return 한다. css파일을 import 하여 스타일을 적용하기 때문에 div 태그에 Card 클래스 네임을 적어주여야 하는데 하나의 클래스네임만 지정한다면 다른 컴포넌트에서 사용할 때에 추가로 클래스 네임을 적을 수 없다. import './Card.css'; function Card(props) { const Cla..

웹/react 2023. 2. 25. 17:34

return 앞에 JS를 사용한 변수의 동적인 값을 return 되는 JSX속에 삽입하려면 중괄호 속에 {값} 처럼 삽입. props 매개변수를 여러개 삽입하지 않고 컴포넌트에 function name(props)와 같이 사용하는데 (컴포넌트) ${props.amount} (App.js) 위와같이 렌더링 하는 부분에서 컴포넌트를 부를 때 속성으로 넣어주고 컴포넌트에서 props를 사용해 동적으로 값을 할당한다.

웹/react 2023. 2. 18. 17:18

리액트는 하나의 루트 노드를 가지는 컴포넌트 트리를 구축한다. import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); SPA인 React이므로 html 파일은 index.html 하나만 사용. 그 속 body에 부분을 JS로 선택해 createRoot를 사용.React의 루트이자 렌더링될 주된 위치라는걸 알려줌. 그렇게 생성한 root 객체에서 render 호출. 그 div 위치에 렌더링을 하는것(App을) div의 내부가 이 되는 것 js에서 createel..

웹/react 2023. 2. 12. 01:20

기본미션

혼공단 2022. 8. 20. 21:02

기본미션

혼공단/sql 2022. 8. 13. 20:11

jsx (javascript + xml) 리액트와 RN에서 사용됨. jsx는 반드시 하나의 부모로 감싸진 채로 반환돼야함 (div 대신 view) 두개 이상을 반환하고 싶다면 view 대신 fragment 자바스크립트 변수를 사용할때는 중괄호로 감싸기 if문은 즉시실행함수로 사용해야함, 복잡한경우 jsx밖에서 처리 삼항연산자나 && || 가능 && 앞 내용이 참이면 뒷내용 렌더링 || 앞이 거짓이면 뒷내용 렌더링 null은 문제없지만 undefined 반환시 에러 주석 // and {/* */} style 클래스명으로 css 사용하는건 app.js에서 style 시트 사용과 비슷 div대신 view에 styles.name in line 스타일은 컴포넌트는 하나의 루트요소만 반환해야 함. 여러가지 내용이 ..

RN 2022. 8. 3. 15:44

array push 추가 pop 제거 stack shift 제거 unshift 추가 queue arr1.concat(arr2) 배열합치기 .length 길이 .indexof("?")인덱스 확인 includes 배열에 들어있는지 reverse 배열순서 역순 slice(2,4)2번부터 4번까지 slice(-3) 뒤에서세개 splice(2,3,"something") 2번부터 3개를 제거 후 " " 내용 추가 (0으로 제거 안할수도있음) 배열을 비교 할 때 배열 속 내용이 아닌 메모리 참고 값을 비교한다. 속의 값이 같아도 === false 반환 object 객체에서 만드는 키는 문자열로 변환됨. .key 와 ["key"]의 차이 - 대괄호를 쓰면 표현식을 넣는게 가능. ["k"+"ey"] 또는 대괄호 속에 변..

카테고리 없음 2022. 8. 1. 09:58