전체 글 썸네일형 리스트형 [React] state와 이벤트 핸들링 state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다 state가 체인지 되면 변화를 감지하여 리렌더링을 수행한다 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다르다 함수형 컴포넌트에서는 Hook 개념을 이용해 더욱 쉽게 사용 가능하다 리액트에는 두 가지 종류의 state가 있다 1️⃣ 클래스형 컴포넌트가 지니고 있는 state 2️⃣ 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state //1st let data = useState('초기값'); console.log(data); // 배열이기 때문에 다음과 같이 출력 let a = data[0]; - 현재값 let b = data[1]; - 함수 //2nd let [data, setData] = useSt.. 더보기 [React] 리액트의 Components와 props Components ✅ 컴포넌트를 선언하는 방식은 두 가지가 있다 1️⃣ 함수 컴포넌트 2️⃣ 클래스형 컴포넌트 ✅ 컴포넌트는 여러 개일 수 있다 함수 컴포넌트 function Wlecome(props) { return Hello, {props.name} } 클래스형 컴포넌트 - render 함수가 반드시 있어야 함 class Welcome extends React.Component { render () { return Hello, {this.props.name} ; } } 그렇다면 이제 첫 컴포넌트 생성해봅시다! 1️⃣ 파일 만들기 2️⃣ 코드 작성하기 3️⃣ 모듈 내보내기 및 불러오기 src 디렉토리에 MyComponent.js 파일 생성하기 component 폴더 생성 👉 MyComponent.js.. 더보기 [React] JSX 문법 알고 싶으면 이리온 : ) 👩💻 본격적으로 JSX 문법에 대해 살펴보기 전에 리액트 코드를 먼저 살펴보고자 한다 1️⃣ index.js const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); root의 render 함수는 App 컴포넌트를 화면에 그리고, 함수 내부에 있는 는 옛날 기능을 사용할 때 경고를 출력하는 기능을 한다 2️⃣ App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export d.. 더보기 [React] 리액트 다운로드하고 실행시키기 Let's start React 리액트란? 리액트는 자바스크립트 라이브러리이다 ( 오직 view만 처리하는 라이브러리 ) SPA는 Single Page Application의 줄임말로 index.html 하나로만 로드하고 실행시키는 구조이다 어떻게 하나로만 가능하냐면... 번들러(WebPack)이 모든 것을 해주기 때문에 가능하다 Webpack은 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image등)을 하나로 묶어서 조합하여 경량화 해 결과물을 만들어 주는 도구이다 번들러는 node.JS를 통해 직접 설정할 수도 있지만, 리액트 프로젝트를 생성시에 자동으로 포함된다 DOM ( Document Object Model )란? HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그(객체)들이.. 더보기 [JavaScript] ES6 문법 - 모듈 임포트/ 엑스포트 ⭐ 모듈 임포트 모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있다. ES6부터는 주요기능들을 모듈로 구성하여 사용이 가능하다! 모듈을 내보내는 방법은 named export방식과 default export방식 2개가 있다. 여러 값을 내보낼 때 named export방식 단일 값을 내보낼 때 default export방식 여러 값 내보내기 👉 named export 모듈 Export하기 //1번 방법 export const name = "이순신"; export const age = 20; export const info = () => { console.log("이름:" + name + ", 나이:" + age); } export를 하기 .. 더보기 [JavaScript] ES6문법 - 클래스, 클래스 상속 Class ✅ 클래스의 멤버변수를 선언할 때는 키워드를 사용하지 X class Person { // 멤버변수 - 변수 키워드 쓰지 않음 name = "홍길동"; age = 20; state = {subject : "JS"}; } ✅ 생성자는 1개이다 (생성자 중복 불가) ✅ 멤버변수는 선언하지 않더라도 this.변수명을 지칭하면 자동 생성 //생성자는 자바스크립트에서 반드시 1개이다(중복 불가) constructor(addr) { //선언한 적 없지만 자동으로 addr이라는 멤버변수로 지칭 this.addr = addr; } 클래스 내부에서의 함수 //함수 func = () => { console.log("func실행"); } 기본 생성자가 없더라도 허용된다 (매개변수가 있는 생성자만 있어도 허용) //.. 더보기 [JavaScript] 여러 태그에 한번에 이벤트 걸기 가능...? 다중 이벤트 여러 이벤트를 한번에 걸어주기/h3> 환혼 주인공들: 1.장욱 2.서율 3.당구 4.낙수 5.진초연 선택한 태그의 값: HTML 삽입 미리보기할 수 없는 소스 위의 코드처럼 이벤트 실행 함수에 반복문을 걸어서 한 번에 다중으로 이벤트를 걸 수 있지만, 이는 매우 비효율적이라서 다음 코드처럼 이벤트 전파를 이용해 이벤트를 걸어주는 것이 좋다 이벤트 전파를 하기 위해서는 이벤트 객체에 대해 먼저 알아야 한다 이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어 이벤트 핸들러에 암묵적으로 전달된다 이벤트 전파 특성 활용하기⭐⭐⭐ 환혼 주인공들: 1.장욱 2.서율 3.당구 4.낙수 5.진초연 선택한 태그의 값:.. 더보기 [JavaScript] 노드 보러 왔다가 클래스 속성 제어도 배우고 갑니다 노드 이동 부모 노드, 자식 노드 선택 기능 설명 childNodes 모든 자식 노드 선택 (단, 노드에 생략된 text도 포함) children 모든 자식 노드 선택 parentElement 부모 노드 선택 nextElementSibling 다음 형제 노드 선택 previousElementSibling 이전 형제 노드 선택 firstChild 첫번째 자식 노드 선택 lastChild 마지막 자식 노드 선택 부모, 자식 노드 선택을 다음의 웹 화면을 기준으로 해보자! HTML 삽입 미리보기할 수 없는 소스 ✅ parentElement ↓↑ 1 홍길자 안녕! 2019-01-01 ↓↑ 2 이순신 반가워 2019-02-01 ....중략 ✅ nextElementSibling & previousElementSib.. 더보기 이전 1 2 3 4 5 ··· 8 다음
