front-end23 [리액트 ] useState useState 버튼을 클릭할 때마다 count가 증가되는 코드를 만들어보겠습니다. 버튼 클릭할 때마다 ui가 업데이트 되게 하려면 state를 씁니다. state는 일반 변수 만드는 것처럼 만들지 않습니다. 1. import : import React, {useState} from 'react'; 를 import 해줍니다. 2. useState 생성 : const [count2, setCount2] = useState(0) useState(0) 에서 0은 초기값입니다. useState(5)라고 하면 5가 초기값이 됩니다. return부분에 state:{count2} 라고 쓰면 서버에 state:5라고 나타납니다. useState라는 함수는 array를 반환합니다. array에는 아이템이 두가지 들어있습.. 2023. 3. 29. [리액트] ex6문법) 화살표 함수 Arrow function Arrow function https://webclub.tistory.com/649 블로그 참조 화살표 함수(Arrow function) 이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. Arrow Function(화살표 함수) 다음의 ES5 의 함수 표현식과 es2015 의 화살표 함수를 비교해 보도록 webclub.tistory.com https://www.youtube.com/watch?v=5kRgzyGRPrU&t=182s 유튜브 참조 새로운 문법인 화살표 함수가 생겼습니다! 기존 함수보다 훨씬 간편하게 사용할 수 있는 문법인 화살표 함수를 리액트에서는 적극적으로 활용합니다. +++ 리액트에서는 클래스 메소드를 화살표 함수의 형태로.. 2023. 3. 29. Restful과 React 이해하기 기존의 Restful 구조 컨트롤러의 지위가 약해졌습니다. 컨트롤러가 무조건 짐을 가지고 떠났던 건 mvc패턴이고, 이제는 컨트롤러에서 짐만 주게 됩니다. 다시 리액트에서의 Restful구조를 보겠습니다. 리액트의 Restful 구조 컴포넌트들은 각각의 js로 만들 수 있습니다. 프로젝트 만들기 프로젝트는 대문자로 만들면 오류가 나므로, react-sample 이라고 만들겠습니다. 리액트란? Single View Application 페이스북 및 커뮤니티가 개발한 UI를 구축하기 위한 자바 스크립트 라이브러리이다. 데이터를 업데이트(변경)하는 것으로 자동으로 html을 업데이트해준다. class - > className 으로 사용한다. hook 2023. 3. 28. JSTL 개념, 라이브러리 종류 JSTL이란? JSTL(JSP Standard Tag Library)은 JSP(JavaServer Pages)에서 자주 사용되는 로직을 간결하게 작성할 수 있도록 지원하는 라이브러리입니다. JSP는 HTML 코드와 Java 코드를 혼합하여 작성하는 서버 측 스크립트 언어입니다. JSP 페이지에서 자주 사용되는 Java 코드는 주로 스크립트릿(Scriptlet) 태그("")를 사용하여 작성합니다. 하지만 스크립트릿 태그를 남발하면 코드의 가독성이 떨어지고 유지보수가 어려워집니다. 이러한 문제를 해결하기 위해 JSTL이 개발되었습니다. JSTL은 JSP 페이지에서 자주 사용되는 로직을 간결하게 작성할 수 있는 다양한 태그와 함수를 제공합니다. JSTL을 사용하면 자주 사용되는 로직을 간결하게 작성할 수 있으.. 2023. 3. 20. [JSP] EL 표현식 EL(Expression Language) 표현식은 JSP(JavaServer Pages)와 JSF(JavaServer Faces)에서 사용할 수 있는 표현식 언어입니다. EL은 JSP와 JSF에서 데이터를 가져오고 출력하기 위해 사용됩니다. EL은 ${ } 형태로 사용되며, 이 안에 Java 변수, JavaBean의 속성, Map의 요소 등을 입력하여 값을 출력할 수 있습니다. 예를 들어, JavaBean에 저장된 이름 속성의 값을 출력하려면 다음과 같은 EL 표현식을 사용할 수 있습니다 ${pageTitle} ${pageDescription} 이 표현식은 "myBean"이라는 이름을 가진 JavaBean의 "name" 속성 값을 출력합니다. EL은 JSP와 JSF에서 데이터를 처리하고 출력하는데 매우.. 2023. 3. 16. [리액트] 생활코딩 - 컴포넌트, props, 이벤트(이벤트 미완성) https://www.youtube.com/watch?v=s3cDPbcoy_4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=6 컴포넌트 복잡한 태그를 하나의 태그로 이름을 붙여서 컴포넌트(사용자 정의 태그)를 만들기 소문자 header는 html에 기본적으로 내장되어 있는 태그입니다. 이 header와 똑같은 이름의 사용자 정의 태그를 만들 건데, 사용자정의태그를 만들 때는 함수를 정의하면 됩니다. 리액트에서 사용자 정의 태그를 만들땐 반드시 대문자로 시작해야 합니다. 먼저, function Header 함수를 만들고 이 함수는 return값으로 html 코드를 return하면 됩니다. 따라서 html의 태그를 Header함수 밑으로 옮겨주고 return 값으로 지정.. 2023. 3. 10. 이전 1 2 3 4 다음
