본문 바로가기

전체 글259

이벤트처리 10. 이벤트 처리 1> 개요 - 이벤트 핸들러(이벤트함수)는 함수 컴포넌트안에서 정의함. ex>     // 함수 컴포넌트     function App() {         // 이벤트 함수         function go() {}         return(             // JSX         );     } - JSX 에서 이벤트 처리는 카멜표기법(onClick, onChange, ...) 을 사용해야 된다. - 기본문법 2가지 가. 이벤트함수명 이용     onClick={이벤트함수명}     ex>         onClick={go}         => 값을 넘길수가 없음.     - 이벤트객체는 자동으로 전달됨. 나. arrow 함수 이용     onClick={arrow함.. 2024. 7. 3.
Props 9. props 1> 용도 - 화면 레이아웃이 중첩된 형태로 되어있고 이때 부모 컴포넌트에서    자식 컴포넌트에게 데이터를 전달할때 사용하는 방법. (단방향) 2> 특징 - 단방향(부모에서 자식으로만 전달 가능) - 전달되는 데이터 종류 제한이 없음. - 필수가 아닌 옵션 3> 문법 가. 속성(proerty)이용 ex>          function Child(파라미터) {         return (             ...         );     }     // 객체분해할당     function Child({key1, key2}) {         return (             ...         );     }     // default 파라미터     function Chi.. 2024. 7. 3.
image 사용하기 8. image 사용하기 - 반드시 src 폴더에 저장하고 import 해서 사용권장. - 실습 가. src/assets 폴더 생성 나. 이미지 저장     import logo from './logo.svg';     import './App.css';     import google from './assets/google.png'     function App() {     return (                                );     }     export default App; # App.jsimport logo from './logo.svg';import './App.css';import google from './assets/google.png'function App() .. 2024. 7. 3.
JSX(JavaScript XML) 7. JSX 1> 개요 - JSX(JavaScript XML) - 웹브라우저에 랜더링되기전에 html 로 변환된다. ( babel 도구 이용 )   즉, JSX 는 웹브라우저에 직접 사용이 불가능한 비표준문법임. 2> 특징 - 반드시 root 태그가 있어야 된다. - 반드시 종료태그가 있어야 된다. ex>      - JSX 에서 JS 의 변수값등을 출력할 때는 {변수값} 사용한다. - {변수값}는 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능. - 논리값(true/false) 와 null, undefined는 {변수값} 사용시 출력이 안됨.   + && 결합해서 조건부 랜더링을 사용할 수 있음.   ex> { true &&  } - css 적용하는 방법     가. html 의 class .. 2024. 7. 3.

티스토리툴바