본문 바로가기

전체 글114

React 기초 useState, props 리액트에서 State는 객체에 대한 업데이트를 실행한다. state가 변경되면 변경된 값을 전하여 컴포넌트는 리렌더링 된다. props는 properties의 줄임말로 어떠한 값을 컴포넌트에 전달해줘야할 때, props를 사용한다. state와 props가 비슷해서 다소 이해하기 힘들수 있지만 이 둘은 엄연히 다르다. 원래 글로 보면 복잡하니까 코드로 봐보자 ex) State // Hi.js import {useState} from "react"; function Hi() { let name = 'park'; const [name,setName] = useState("park"); function printName() { name = name === "park" ? "park" : "nopark"; se.. 2022. 9. 28.
React 맛보기 React란 자바스크립트 라이브러리중 하나로 웹 프레임워크중 하나이다. React의 특징 1. 선언형 : HTML/CSS/Javascript 로 나눠서 적는거 보다 JSX를 활용한 선언형 프로그래밍 2. 컴포넌트 기반 (Component-Based) : 요소별로 개발하여 분리하여도 독립적으로 사용이 가능하므로, 기능에 집중하여 개발이 가능하다. 3. 범용성 : 자바스크립트 기반이므로 자바스크립트 프로젝트 어디에든 유연하게 적용이 가능하다. JSX 먼저 위에서 말한 JSX가 무엇인지 알아야 할 필요가 있는데 JSX는 자바스크립트 XML의 줄임말이고 HTML도 아니고 문자열로 취급하지도 않는다. 간단하게 자바스크립트의 확장 문법이라고 생각하면 된다. JSX는 확장 문법이지만 "Babel" 이라는 자바스크립트.. 2022. 9. 23.
고차함수(Higher order function) 고차함수란 함수의 일급객체로 취급하여 인자로 받아서 결과로 반환하는 함수를 의미한다. 글로만 보면 어려운데 가볍게 코드로 봐보자 ex) 함수를 인자로 가져다 사용하는 경우 function sq (num) { return num * num; } function sq2 (func,num) { return func(num); } let result = sq2(sq,2); console.log(result) // 4 ex) 함수를 리턴하는 경우 function sum (sel){ return function(num){ return num + sel; } } let result = sum(10)(3); console.log(result); // 13 let add = sum(5); // sum은 함수를 반환하므로.. 2022. 9. 21.
DOM(Document Object Model) - DOM DOM 이란 Docoument Object Model의 약자로 문서 객체 모델을 의미한다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문거 구조, 스타일, 내용 등을 변경할 수 있게 도와준다. 웹페이지는 일종의 문서이므로 문서는 웹 브라우저를 통해 그 내용이 해석되어 화면에 표시되거나 HTML 소스 자체로 나타나기도한다. 또한 객체 지향 표현이며, 자바스크립트와 스크립트 언어를 이용해 DOM을 수정할 수 있다. - DOM의 사용 ex(CRUD) 자바스크립트언어를 사용하여 DOM을 사용하는 방법이 있다. ex ) Create 생성은 createElement 메소드를 사용하여 element를 생성할 수 있다. document.createElem.. 2022. 9. 20.

티스토리툴바