Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS
06. 미니프로젝트-2W

08. SpringFramework , SrpingBoot 
19. 중간프로젝트 (1M)
10. Linux 명령어
11. AWS
12. Docker
13. Kubernetes
14. React JS (v)
15. App - Android
16. 최종프로젝트 (1M)

---

React(리액트)

컴포넌트 반복

• 목록 요소들을 반복처리 할때는 map함수 이용
• 반복 컴포넌트에는 반드시 key props를 전달해야 함

map

• map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용

array.map(callbackFunction(currenValue, index, array), thisArg)

• currenValue : 현재값
• index : 현재인덱스
• array : 현재배열
• thisArg : callbackFunction내에서 this로 사용될 값

filter

• filter는 요소 개수만큼 반복하며 boolean으로 리턴된 결과를 사용해 새로운 list를 만듬
• return값이 true인 값만 가지고 감

array.filter(callbackFunction(currenValue, index, array), thisArg)

• currenValue : 현재값
• index : 현재인덱스
• array : 현재배열
• thisArg ; callbackFunction 내에서 this로 사용될 값

• 배열합치기

1. concat

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); //["a", "b", "c", "d", "e", "f"]

2. 전개구문

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const array3 = [...array1, ...array2];
console.log(array3); //["a", "b", "c", "d", "e", "f"]

• 실습

function IteratorComponentQ2(){


    //1 - select는 컴포넌트반복으로 option태그를 생성합니다.
    const select = ['HTML', 'Javascript', 'CSS', 'Java', 'Oracle', 'Mysql'];

    //2 - 아래 데이터는 state로 관리하고 화면에 li태그로 반복해주세요 .
    const data = [
        {id: 1, type: 'Java', teacher: '이순신'},
        {id: 2, type: 'Java', teacher: '홍길자'},
        {id: 3, type: 'Javascript', teacher: '홍길동'},
        {id: 4, type: 'Oracle', teacher: '이순신'},
        {id: 5, type: 'Mysql', teacher: '이순신'},
        {id: 6, type: 'CSS', teacher: '박찬호'},
        {id: 7, type: 'HTML', teacher: 'coding404'},
    ];

    // 3. select태그가 체인지 되면, 선택된 값만 data에서 필터링

    // 4. 검색을 누르면 검색 키워드를 통해서 data에서 필터링

    const [sel,setSel] = useState(select);
    const [dat,setDat] = useState(data);
    const [search,setSearch] = useState('');
    const newSelect = sel.map((data,index)=>
        <option key={index} value={data}>{data}</option>
    )

    const newData = dat.map(data=>
        <li key={data.id}>{data.type}-{data.teacher}</li>
    )

    const handleSelect = (e)=>{
        console.log(e.target.value)
        let newData=data.filter(data=>{return e.target.value===data.type})
        setDat(newData);
    }

    const handleVal = (e)=>{
        setSearch(e.target.value);
    }   
    const handleEnter = (e)=>{
        if(e.key==="Enter"){
            handleSearch();
        }
    }


    const handleSearch = () =>{
        let newData = data.filter(data=>{return data.type.includes(search)|data.teacher.includes(search)})
        setDat(newData);
    }


    return(
        <>
            <h3>실습</h3>
            <div>
                Search:<input type="text" onKeyUp={handleEnter} onChange={handleVal} value={search}></input>
                <button type="button" onClick={handleSearch}>검색</button>
            </div>
            <div>
                과목찾기:<select onChange={handleSelect}>
                    {newSelect}
                </select>
            </div>
            <ul>
                {newData}
            </ul>
        </>
    )
}

리액트 훅

Hook

• 함수형태의 컴포넌트에서 사용되는 몇가지 기술 (useState, useEffect)
• 리액트 혹은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능
• 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 구성

UseEffect

useEffect(실행시킬 콜백함수, 값에 따른 렌더링 지정- 배열)

• 첫번째 매개변수는 실행시킬 콜백함수
• 두번째 매개변수는 배열[]을 사용해 특정값이 update될 때만 실행시켜 줄 수 있음
• 컴포넌트의 라이프사이클을 다룸

라이프사이클 (클래스형 컴포넌트 기준)

• 렌더링 이후 실행시킬 작업이 있다면 다음의 함수 사용

1. componentDidMount : 컴포넌트가 마운트 됨 => 첫번째 렌더링이 마치면 호출
2. componentDidUpdate : state의 변경, props의 변경 이후 실행
3. componentWillUnmount : 컴포넌트가 리렌더링 되기직전 시점에 실행

• 클래스형 componentDidMount()대체

• 렌더링 이후 항상 실행

useEffect( ()=> {
    console.log('렌더링 이후 항상 실행');
})

• 마운트 이후 한번만 실행

useEffect( ()=> {
    console.log('렌더링 이후 항상 실행');
},[])

• 두번째 인자에 []를 줌으로써 렌더링 이후 한번만 실행되게 함

• 클래스형 componentDidUpdate()대체

• 특정값에 의해 컴포넌트가 업데이트 되고 난 후 발생

useEffect( () => {
    console.log('마운트 이후, 특정 state가 업데이트 된 이후 실행')
},[name]) // name이 바뀌면 effect 실행됨 (,나열 가능)

• name값 변경시 실행

useEffect( () => {
    console.log('마운트 이후, 특정 state가 업데이트 된 이후 실행')
},[name,age]) // name이 바뀌면 effect 실행됨 (,나열 가능)

• []안에 여러 요소를 나열할 수 있으며 위의 코드는 name, age 값중 하나라도 변화하면 실행

• useEffect안에서 특정요소 설정 후 해당 객체타입 state를 setState하는 경우 무한루프에 빠질 수 있음

useEffect( () => {
    console.log('마운트 이후, 특정 state가 업데이트 된 이후 실행');
    setName('aaa');
},[name]) // name이 바뀌면 effect 실행됨 (,나열 가능)

• name이 변경시 useEffect가 실행되는데 useEffect안에서 setName을 통해 name을 변경시키므로 무한루프가 발생
• 따라서 특정state를 설정하였다면 해당 state를 제외하고 setState는 가능하나 해당 state를 setState하는것은 불가능

• 클래스형 componentWillUnMount()대체

• 컴포넌트가 화면에서 사라지기 직전에 호출

useEffect( () => {
    console.log('마운트 이후, 특정 state가 업데이트 된 이후 실행 2')
    
    // unmount이후 실행
    return ()=> {
        console.log(`언마운트 이후 동작하게 됨 3. 업데이트 직전값: ${name}`);
    }
},[name]) // name이 바뀌면 effect 실행됨 (,나열 가능)

• useEffect안에 return함수는 언마운트 시 실행
• 언마운트 시점 또는 name(특정 state)이 다시 바뀌기 직전에 return안의 함수가 실행