[73일차] react

node.js

Node.js는 Chrome V8 JavaScript 엔진에 기반을 둔 JavaScript 런타임입니다. 웹 브라우저의 외부에서도 JavaScript를 실행할 수 있게 만들어줍니다. 이는 서버 측 개발에 JavaScript를 사용할 수 있도록 해주어, 웹 개발에서 프론트엔드와 백엔드 양쪽 모두에 JavaScript를 사용하는 것을 가능하게 합니다.

 

npm, yarm : 자바스크립트 패키지 관리도구

 

번들러: 여러 개의 자바스크립트 파일을 하나 또는 몇 개의 파일로 병합(번들링)해주는 역할

주로 웹팩사용

바벨 : 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5문법으로 변환

리액트

- 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. 주로 싱글 페이지 애플리케이션 (SPA)나 모바일 애플리케이션을 구축하는데 사용됩니다.

- 데이터 변경 감지에서 UI 렌더링

 

JSX (JavaScript eXtension)

JSX는 자바스크립트 확장문법이며 XML과 매우 유사하며 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

 

JSX문법

1. return 시에는 하나의 DOM만 리턴 할 수 있다

 

2. 변수 선언은 let 또는 const만 사용

 

3. if 사용 불가능 -> 삼항 연산자 사용(조건? 값(true):값(false))

<div>
	a는 {a===10?'10입니다.':'10이 아닙니다.'}
</div>

 

4. 조건부 렌더링 (조건&&값(true))

<h1>
	해당 태그{b===10 && '20입니다.'}
</h1>

 

5. 변수 선언은 있는데 값이 없을때 undefined

 

6. css 디자인

- 내부에 적는 방법

- 외부파일에 적는 방법

- 라이브러리 사용(부트스트랩, conponent-styled)

 

 불변함수-> 깊은 복사 함수 

데이터 변경을 감지 하기 위해서는 깊은 복사함수 사용

      //깊은 복사함수
        //concat,filter,map,slice,스프레드 연산자

        console.log("1.==== 스프레드 연산자");
        const a = [1,2,3];
        const b = [...a];
        b.push(4);
        console.log(`a의 값은:${a}`);//1,2,3
        console.log(`b의 값은:${b}`);//1,2,3,4

     
        console.log("2.==== 추가하기 concat");
        const a2= [1,2,3];
        const b2 = a2.concat(4);
        console.log(`a2 값은:${a2}`);//1,2,3
        console.log(`b2 값은:${b2}`);//1,2,3,4
        const c2 = [0,...a2,4];
        console.log(`c2 값은:${c2}`);//0,1,2,3,4

      
        console.log("3.==== 걸러내기,삭제하기 filter");
        const a3 = [1,2,3];
        const b3 = a3.filter((n)=>{return n!= 1}); //bool을 retuen
        console.log(`b3 값은:${b3}`);//2,3


        console.log("4.==== 잘라내기, 배열 사이에 삽입하기");
        const a4 = [1,2,3];
        const b4 = a4.slice(0,2);
        console.log(`b4의 값은:${b4}`);//1,2
        const c4 = [...a4.slice(0,2),4,...a4.slice(2,3)];
        console.log(`c4의 값은:${c4}`);//[1,2,4,3]

        console.log("5.==== 반복하기 map");
        const a5 = [1,2,3];
        const b5= a5.map((n)=>n+10);
        console.log(`b5의 값은:${b5}`);

        console.log("6.==== 수정하기,map과 spread 응용");

        console.log("6.==== spread을 이용한 업데이트");
        const data = {phone:"2222"};
        const a6 = {id:1,name:"홍길동",phone:"1111",age:12,gender:"man"}
        const b6 = {...a6,...data};
        console.log(b6);

        console.log("6.==== map,spread을 이용한 오브젝트 업데이트");
        const users =[
            {id:1,name:"구태모",phone:"2222"},
            {id:2,name:"이대엽",phone:"333"},
            {id:3,name:"오승훈",phone:"4444"},
        ];

        const updateUserDto = {
            id:2,name:"홍길동"
        }
        const newUsers = users.
            map(user=>user.id===updateUserDto.id?{...user,...updateUserDto}:user);
        console.log("newUsers",newUsers);

 

 

useState

 

map활용

function App() {
  let list = [1,2,3];
  return (
    <div>
      <div>
        {list.map((n)=>(
          <h1 key={n}>{n}</h1>
        ))}
      </div>
    </div>
  );
}

 

useState

function App() {
  //let number =1; //상태 값 아님
  const[number,setNumber] = useState(1);
  const add=()=>{
    //number++;
    setNumber(number+1);
    console.log('add',number);
  }
  return (
    <div>
        <h1>숫자:{number}</h1>
        <button onClick={add}>더하기</button>
    </div>
  );
}

 

useSteate2

function App(){
  console.log("app 실행");
  const[num,setNum] = useState(5);
  let sample = [
    {id:1,name:'홍길동'},
    {id:2,name:'임꺽정'},
    {id:3,name:'김남길'},
    {id:4,name:'홍주현'}
  ];
  //다운로드 받음
  const[users,setUsers] = useState(sample);//레퍼런스가 변경되야 동작

  const download = () =>{
    //기존 데이터 세팅
    //sample.push({id:5,name:'조자룡'});//얇은 복사: 변경안됨 
    /*
    const a = sample.concat({id:5,name:'조자룡'});
    setUsers(a);
    */
   setUsers([...sample,{id:num,name:'조자룡'}]);
   setNum(num+1);
  }

  return(
    <div>
      <button onClick={download}>다운로드</button>
      {users.map((u)=>(
        <h1 key={u.id}>
          {u.id},{u.name}
        </h1>
      ))}
    </div>
  )
}