02/22 59회차 수업
오전 시험
POJO 프레임워크 step1, step2, step3 을 순차적으로 진행해 나갈 것입니다.
복습 내용
- 요청객체의 역할과 코드 활용법에 대해 설명하고 코드에 적용할 수 있다
- 응답객체의 역할과 코드 활용법에 대해 설명하고 코드에 적용할 수 있다
- 페이지 이동방법 sendRedirect와 forward 차이점에 대해 설명할 수 있다
- Restful API에 대해 말할 수 있다
- 서블릿의 역할과 JSP역할에 대해 설명할 수 있다
- 4가지 scope속성에 대해 설명할 수 있다
- 자바코드와 HTML코드 섞어쓰기 연습할 것
서블릿으로 화면을 그리는것은 왜 부적합한가
JSP
ReatfulAPI get, post방식 정리하기
자바문법중에서는
변수 제어문 컬렉션프레임워크 배열 리스트 맵 제어문 인스턴스화 생성자 정리하기
React
React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. React는 Facebook에서 개발되었으며, 현재는 오픈 소스 프로젝트로 유지보수됩니다. React는 사용자 인터페이스를 구성하는 컴포넌트(component) 기반으로 작동합니다.
React를 사용하면 복잡한 UI를 구성하는 것이 쉬워집니다. 각 컴포넌트는 각각의 책임을 갖고 있으며, 이를 조합하여 더 복잡한 컴포넌트를 만들 수 있습니다. 컴포넌트는 일반적으로 JavaScript 함수나 클래스로 정의되며, JSX라는 문법을 사용하여 HTML과 비슷한 구조로 작성됩니다.
React는 가상 돔(Virtual DOM)을 사용하여 성능을 향상시킵니다.
가상 돔은 React가 UI를 업데이트하는 방식 중 하나입니다.
React는 UI 변경 사항을 추적하여 변경된 부분만 실제 돔에 적용하므로, 필요한 부분만 다시 렌더링됩니다.
이를 통해 UI 업데이트 속도가 빨라지며, 사용자 경험을 향상시킬 수 있습니다.
React는 또한 React Native라는 도구를 제공합니다. React Native를 사용하면 React로 작성한 코드를 기반으로 iOS와 안드로이드 모바일 앱을 만들 수 있습니다. 이를 통해 개발자는 동일한 코드를 재사용하여 다양한 플랫폼에 대한 앱을 빠르고 쉽게 만들 수 있습니다.
리액트에서는 사용자 정의 태그를 사용 할 수 있다.
자바에서는 this가 정해져 있지만 JS에서는 this가 참조하는 값이 계속 바뀐다.
훅을 통해서 클래스로 처리하는것들을 지원한다.
함수형 프로그래밍이 대세이다 요즘^^
함수형 프로그래밍
입력 하나에 출력이 무조건 하나인것을 함수형이라고 한다.
부수효과가 없는 순수함수를 1급 객체로 간주하여 파라미터나 반환값으로 사용할 수 있으며 참조 투명서을 지킬 수 있다.
유지보수에는 좋다. 직관적이다.
문제는 메모리를 많이 차지한다.
리액트는 실시간으로 연동이 가능하다.! 동기화 스레드?????
브라우저가 DOM Tree를 그린다. 위치가 중요하다.
위치에 제한 안받으려면 defer를 쓰자.
window.write
document.querySelector
로 화면에 그린다.
리액트는 불변 객체이다.(immutable)
JSX
JSX는 JavaScript의 확장 문법으로, React에서 UI를 작성하기 위해 사용됩니다.
JSX는 HTML과 매우 유사한 구문을 사용하여 JavaScript 코드 안에 마크업을 작성할 수 있게 합니다.
JSX는 React 컴포넌트를 정의하는 데 사용되며, 이를 통해 가독성과 작성 용이성이 향상됩니다.
JSX를 사용하면 일반적인 JavaScript 코드 안에 HTML 태그와 같은 구문을 사용할 수 있습니다.
JSX 코드를 작성할 때, 각 요소는 하나의 루트 요소로 감싸져 있어야 합니다. 이를 통해 브라우저에서 요소를 렌더링할 때, 유효한 HTML 구조를 유지할 수 있습니다.
JSX는 Babel과 같은 트랜스파일러를 사용하여 일반적인 JavaScript 코드로 변환됩니다.
이는 브라우저가 이해할 수 있는 JavaScript 코드로 변환됨으로써, React 애플리케이션을 구현할 수 있게 합니다.
예를 들어, 다음은 JSX를 사용하여 React 컴포넌트를 정의하는 코드의 예시입니다:
위 코드에서는 Greeting이라는 React 함수 컴포넌트를 정의하고 있으며, <h1> 태그를 사용하여 화면에 텍스트를 표시하고 있습니다. 중괄호({}) 안에는 JavaScript 표현식을 사용할 수 있습니다. 이 경우 props.name이라는 프로퍼티 값을 사용하여 화면에 동적인 데이터를 출력하고 있습니다.
JSX는 JavaScript XML의 약자로, JavaScript의 확장 문법입니다. React에서 UI를 작성하기 위해 사용됩니다. JSX를 사용하면 HTML과 유사한 구문으로 UI를 작성할 수 있으며, JavaScript 코드와 함께 인라인으로 작성할 수 있습니다.
JSX는 일반적인 HTML과 매우 유사하지만, 몇 가지 차이점이 있습니다.
- 태그 이름은 대문자로 시작합니다.
- 모든 태그는 닫는 태그가 필요합니다.
- 중괄호({}) 안에 JavaScript 표현식을 작성할 수 있습니다.
- 속성은 HTML과 유사한 방법으로 작성하지만, JavaScript 객체 형태로 전달됩니다.
아래는 JSX를 사용하여 React에서 Hello World를 출력하는 간단한 예제입니다.
위 예제에서는 React와 ReactDOM을 import하여 사용하고, ReactDOM.render() 함수를 사용하여 화면에 출력합니다. ReactDOM.render() 함수는 첫 번째 인수로 JSX 요소를, 두 번째 인수로 출력할 DOM 요소를 받습니다.
JSX를 사용할 때는 기존 HTML에서는 허용되지 않는 키워드들이 있다는 점에 주의해야 합니다. 예를 들어, class 대신 className을 사용해야 합니다. 이러한 점을 주의하여 JSX를 작성하면, React에서 보다 간결하고 가독성이 좋은 UI를 작성할 수 있습니다.
React 특징
React에서 랜더링은 Virtual DOM과 DOM을 사용하여 이루어집니다. React는 Virtual DOM을 사용하여 UI 업데이트를 처리하며, 변경된 부분만 실제 DOM에 적용합니다. 이를 통해 랜더링 속도가 향상되고, 사용자 경험을 향상시킬 수 있습니다.
랜더링(Rendering)은 컴퓨터에서 시각적인 결과를 출력하는 과정입니다. 웹 개발에서 랜더링은 서버나 클라이언트 컴퓨터에서 HTML, CSS, JavaScript 등의 코드를 실행하여 브라우저 화면에 웹 페이지를 출력하는 것을 의미합니다.
웹 브라우저는 HTML, CSS, JavaScript와 같은 웹 문서를 받아들이고, 이를 해석하여 화면에 표시합니다. 이때 브라우저는 문서의 구조를 분석하고, 스타일을 적용하며, JavaScript 코드를 실행하여 웹 페이지를 렌더링합니다.
React는 불변성(Immutability)을 유지하는 것이 좋은 프로그래밍 관행 중 하나로 강조합니다. 이는 컴포넌트 상태(state)와 속성(props) 데이터를 변경할 때, 원본 데이터를 변경하지 않고 새로운 데이터를 생성하여 사용하는 것을 말합니다.
React에서 불변성을 유지하는 이유는 다음과 같습니다.
- 성능 향상: React는 Virtual DOM을 사용하여 UI 업데이트를 처리합니다. 불변성을 유지하면 변경된 부분만 Virtual DOM에 적용할 수 있어 렌더링 속도가 빨라지고, 성능이 향상됩니다.
- 예측 가능한 상태 관리: 불변성을 유지하면 컴포넌트 상태와 속성 데이터가 변하지 않는 것을 보장할 수 있습니다. 이를 통해 예측 가능한 상태 관리를 할 수 있으며, 디버깅이 용이해집니다.
- 동시성 처리: React는 여러 개의 컴포넌트를 동시에 렌더링할 수 있습니다. 불변성을 유지하면 다중 스레드 환경에서 동시성 처리를 보장할 수 있습니다.
따라서 React에서는 상태(state)를 변경할 때, 기존의 상태를 변경하는 대신 새로운 상태 객체를 생성하여 사용하는 것을 권장합니다. 예를 들어, setState 함수를 사용하여 상태를 업데이트할 때, 이전 상태를 변경하는 것이 아니라, 새로운 상태 객체를 반환하는 함수를 전달해야 합니다. 이를 통해 불변성을 유지하며, React의 성능과 예측 가능한 상태 관리를 보장할 수 있습니다.
Props란?
React에서 props는 컴포넌트 간에 데이터를 전달하는 방법입니다. props는 "properties"(속성)의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.
props는 컴포넌트의 매개변수와 비슷한 역할을 합니다. 부모 컴포넌트에서 자식 컴포넌트를 호출할 때, 자식 컴포넌트에 전달할 데이터를 props로 전달합니다. 이후 자식 컴포넌트에서는 이 props를 사용하여 데이터를 화면에 렌더링하거나, 이벤트 처리 등의 작업을 수행합니다.
props는 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 자식 컴포넌트에서는 props를 읽기 전용으로 사용합니다. 즉, props를 직접 변경할 수 없고, 변경이 필요한 경우 상태(state)를 사용해야 합니다.
React에서 props는 객체 형태로 전달되며, 컴포넌트에서는 props 객체를 이용하여 props 데이터를 참조할 수 있습니다. 예를 들어, 다음과 같이 자식 컴포넌트에서 props를 사용하여 화면에 데이터를 출력하는 코드를 작성할 수 있습니다.
위 코드에서 name이라는 props를 Greeting 컴포넌트에 전달하고 있습니다. 이후 Greeting 컴포넌트에서는 props.name을 사용하여 Hello, John!이라는 텍스트를 출력하고 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.querySelector("#root");
//홀수는 작게 짝수는 크게출력하라
//파라미터에 {}가 있으면 props이다.
const Number2 = ({number}) =>{//1,2,3,4,5
return number%2===0?<h1>{number}</h1>:<h3>{number}</h3>
};
const element=(
<>
<Number2 number="1"/>
<Number2 number="2"/>
<Number2 number="3"/>
<Number2 number="4"/>
<Number2 number="5"/>
<Number2 number="6"/>
</>
)
ReactDOM.createRoot(rootElement).render(element);
</script>
</body>
</html>
<!-- 홀수가 작게 짝수가 크게?
-->홀짝 구분해서 출력하기
JS와 JSX를 섞어 쓴다.
