1교시 10-11/ 주제 : /리액트_함수형 컴포넌트 / hook_ useState()
코드 파일:/
함수형컴포넌트
// rcc : 클래스형 컴포넌트 기본 소스 작성 단축키
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}
export default App;
// rsf : 함수형 컴포넌트의 기본 소스를 작성 단축키
import React from 'react';
function App(props) {
return (
<div>
</div>
);
}
export default App;
// rsf : 함수형 컴포넌트의 기본 소스를 작성 단축키
import React from 'react';
function App(props) {
return (
<div>
<h1>App</h1>
{/* 값을 전달하고자 할때 {}로 싸야한다, 문자열은 생략할 수 있다. */}
<Bpp bonobono={"uaaaaaaa"}/>
</div>
);
}
//함수형 컴포넌트는 props를 받을때, this를 사용할수 없다 - > 클래스가 아니기 때문에
function Bpp(props) {
let { bonobono } = props;
return (
<div>
<h1>Bpp</h1>
<h1>{ bonobono }</h1>
<h1>{ props.bonobono }</h1>
</div>
);
}
// 외부에서 파일을 임포트 하고자 할때 기본값이 되는 클래스를 지정
// 반드시 한개는 있어야한다.
export default App;
hook
useState()
let [ 변수명, set변수명 ] = useState(100); 으로 변수의 값을 정의하고 호출 할 수 있다.
function Bpp(props) {
let [ rabbit, setRabbit ] = useState(100);
let [ tiger, setTiger ] = useState('호랑이');
return (
<div>
<h1>Bpp내용입니다.</h1>
{/* useState를 이용해 정의한 변수를 호출한다 */}
<h1>{rabbit}</h1>
<h1>{tiger}</h1>
</div>
);
}
2교시 11-12/ 주제 : hook_ useEffect(), Fragment, map()
코드 파일:/
function Bpp(props) {
let [value, setValue ] = useState(100);
console.log(1);
useEffect( ()=>{
console.log(3);
});
console.log(2);
return (
<div>
<h2>Bpp내용입니다</h2>
<h3>{ value }</h3>
<button onClick={ ()=>{ setValue( value + 1) } }>useEffect</button>
</div>
);
}
export default App;
Fragment
불필요한 html태그를 추가하지 않고 사용할 수 있다.
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<h1>App내용입니다.</h1>
</Fragment>
);
}
}
export default App;
유효성
약식으로 표기하여 element가 보다 직관적으로 파악이 가능해진다.
map()
반복해서 출력해야하는 element를 배열에 넣어두고 map()함수로 순서대로 나열해 컴포넌트를 return 할 수 있다.
키값이 설정되지 않아 생성되는 에러메시지,
키값을 생성한 이후에는 경고메시지가 출력되지 않는다.
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
// 배열에 키-값형태로 선언
const ar = [
<li key='1'>tiger</li>,
<li key='2'>lion</li>,
<li key='3'>dog</li>,
];
//배열에는 값의 형태로만 선언
const br = [
'brtiger',
'brlion',
'brdog',
];
return (
<>
<h1>App내용입니다.</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
{/* map() 원본데이터를 가공하여 다시 출력하는 함수 ->
배열형태로 저장된 html태그들의 값을 순차적으로 호출한다.
콜백함수형태로 호출한다 */}
{ ar.map( x => x )}
</ul>
{/* ar을 직접호출해도 출력이 가능한데? */}
<h3>{ br }</h3>
<ul>
{ ar.map(x=>x) }
</ul>
{/* 배열에 키를 호출부에서 지정하여 호출 */}
<ul>
{ br.map((v,i) => { return <li key={i}>{v}</li> } ) }
</ul>
{/* 위에 같은코드, 람다의 약식표현으로 간소화 */}
<ul>
{ br.map((v,i) => <li key={i}>{v}</li> ) }
</ul>
</>
);
}
}
export default App;
3교시 12-13/ 주제 :
코드 파일:/
33_2 reactMap() 처음부터 꼭 다시 작성해볼것 안보고 칠 수 있을 만큼!!!
import { render } from '@testing-library/react';
import React, { Component } from 'react';
class App extends Component {
constructor(){
super();
this.state = {ar:[],};
}
f1 = () => {
console.log('f1 call');
// 1. 서버에 데이터를 요청한다.
// 2. 서버는 DB에서 데이터를 가져온다.
// 3. 서버는 클라이언트에 데이터를 돌려준다.
// 받은 데이터를 배열에 저장한다.
this.setState( {ar : [ '소나무', '중나무', '대나무' ] });
// 4.전달받은 데이터를 테이블에 넣을 수 있는 컴포넌트를 만든다.
//Bpp에 전달하기 위해 state()를 이용한다, setState()에 배열을 넣는다.
}
render(){
return(
<div>
{/* Bpp를 호출하며 값을 넘겨준다. */}
<Bpp ar = { this.state.ar }/>
<button onClick={ this.f1 }>데이타 요청</button>
</div>
)
}
}
class Bpp extends Component {
render() {
console.log(this.props.ar);
// ar객체를 선언하여 props를 담아 state()값을 넘겨준다.
let {ar} = this.props;
return (
<div>
<h1>Bpp</h1>
<ul>
{/* map()를 사용하여 넘겨받은 값을 li 로 출력한다. 출력부에서 키,값이 정의되도록 양식을짠다 */}
{ ar.map( (v, i) => { return <li key={i}> {v} </li>} ) }
{/* 위와 동격코드 생략할 수 있다. */}
{ ar.map( (v, i) => <li key={i}> {v} </li> ) }
</ul>
{/* 객체 배열에 넣어서 테이블형태로 출력해본다, -> i v v2 v3..
이거 혼자 해볼것 테이블 영역에서 인덱스와, 값 형태로 출력하기 */}
<table>
</table>
</div>
);
}
}
export default App;
참고하기
369페이지~ 책 372페이지
객체로 이루어진 배열에 객체 추가하기 - 리액트 React hooks
현재 이런 상태이고, input에 값을 입력하고 버튼을 누르면이런 배열을 만들고 싶다.현재코드는 이렇다.배열에 새로운 엘리먼트 추가하기(1) ...array (스프레드 연산자) 사용원래 array (그러니까 oldA
velog.io
4교시 14-15/ 주제 : Spring 개요, Maven 프로젝트 생성
코드 파일:/
스프링
프레임워크 - 떡볶이집?
이미 판매 환경이 갖춰진 가게?
스프링 설치
Spring makes Java simple.
Level up your Java code and explore what Spring can do for you.
spring.io
Maven Project 생성
Artifact - 저장소이름을 지정
Packaging- jar 디폴트
war파일로도 선택할 수 있다.
프로젝트를 생성하면 progress가 진행되며 프로젝트가 생성되어진다.
5교시 15-16/ 주제 : 메이븐 프로젝트 생성과 라이브러리 설치
코드 파일:/
메이븐(Maven) vs 그레들(Gradle)
외부 라이브러리를 다운받음에 있어서의 차이가 있다
https://dev-coco.tistory.com/65
메이븐(Maven)과 그래들(Gradle)의 개념 및 비교
스프링과 스프링부트를 공부 하려던 중 maven과 gradle을 알게되었습니다. maven과 gradle이 빌드관리도구인 것은 알고있지만 자세한 개념은 모르기에 maven과 gradle 각각의 개념과 정확한 차이점을 알
dev-coco.tistory.com
메이븐 프로젝트가 생성되었다
libraray : >> 다운로드를한다. >> Pox.xml(exam.lib)
exam.lib >> 어디서 받아오는가??
https://repo1.maven.org/maven2/
Central Repository:
repo1.maven.org
org/springframework
spring-context
artifaction
spring-context
5.3.10
많은 라이브러리를 확인할 수 있다.
https://repo1.maven.org/maven2/org/springframework/
Central Repository: org/springframework
repo1.maven.org
라이브러리의 정보가 나온다
org/springframework
spring-context
artifaction
spring-context
5.3.10
pom.xml파일안에 위의 라이브러리가 추가된것을 확인할 수 있다.
alt + F5 를 눌러 해당 라이브러리가 적용된것인지 재 확인하는 절차를 거친다
Maven Dependencies에서 받은 라이브러리의 내용을 확인할 수 있다.
위의 spring-context 5.3.10.jar 라이브러리는 다른 파일들과 함께 추가되었다.
이 경우 하나의 파일로만은 역할을 제대로 할 수 없고 다른 파일들과 함께 추가되어야만,
이것을
의존관계(Dependencies)이다
이러한 의존관계는 같은 버전이외에도 다른버전과 함께 중첩되어 에러를 발생하는 경우도 있으므로
관련 디렉토리를 확인할 필요가 있다.
위의 라이브러리를 날리면, 이클립스가 pom.xml파일과 비교하여 라이브러리를 재 설치하게된다.
메이븐 컴파일러 플러그인 설치하기
maven-compiler-plugin 검색,
알트+F5로 업데이트 메이븐 프로젝트로 확인!
6교시 16-17/ 주제 :
코드 파일:/
Spring식, 프로그래밍,
xml 파일 생성
xml 코드에서 실행할 클래스의 객체를 생성한다,
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">
<!-- 코드추가 -->
<!-- bean는 객체를 생성시킨다. -->
<!-- Aniaml aniaml = new Aniaml(); -->
<bean id="animal" class="Pack.Aniaml"/>
</beans>package Pack;
import org.springframework.context.support.GenericXmlApplicationContext;
class Animal{
public Animal() {
System.out.println( "생성자 call" );
}
void f1() {
System.out.println( "f1 call" );
}
}
public class Hello {
public static void main(String[] args) {
// System.out.println( "start" );
//
// Aniaml aniaml = new Aniaml();
// aniaml.f1();
//GenericXmlApplicationContext클래스로 빈 객체를 생성하고, 인자로 xml파일을 지정하여 생성한 객체를 담아준다
GenericXmlApplicationContext ctx = new GenericXmlApplicationContext("classpath:Context.xml");
System.out.println( ctx.hashCode() );
// bean을 통해 객체를 얻겠다
Animal t1 = ctx.getBean("animal", Animal.class);
t1.f1();
//사용을 완료하면, close로 메모리 누수를 방지한다
ctx.close();
}
}외부에서 클래스를 통한 객체를 생성해서 호출하는 방법은
Spring을 통할경우 일부 코드가 생략되어지면서 활용도가 높아진다.
7교시 17-18/ 주제 :
코드 파일:/
'업무 일지' 카테고리의 다른 글
| day3 - 월말 업무, Spring boot 초기 환경 문제해결 (0) | 2022.11.30 |
|---|---|
| day2 - 개발환경 세팅 (0) | 2022.11.29 |
| day1- 총무관리 페이지 내용관련 정리 (0) | 2022.11.28 |
| 9월 27일 (화) 강의노트 (0) | 2022.09.27 |
| 9월2일(금) 강의노트 리액트 기초, 리눅스 (0) | 2022.09.02 |
