유정잉

72일차 리액트 [ 구조분해할당, spread연산자, props, 이벤트, state ] 본문

네이버 클라우드 부트캠프/복습 정리

72일차 리액트 [ 구조분해할당, spread연산자, props, 이벤트, state ]

유정♡ 2024. 6. 4. 11:40

[ 배열구조분해할당과 객체구조분해할당 ]

    배열은 [] 대괄호 , 객체는 {} 중괄호 사용 

1) finder -> 문서 -> test04 파일 생성 -> index.html 파일 생성 -> <script src="unit.js"></script> 로 unit.js로 연결

    -> unit.js 파일 생성 -> 1. 배열구조분해할당 2.객체구조분해할당

 

[ ...연산자(spread 연산자) ]

    객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려줌 

 

 

[ {중괄호}를 이용한 컴포넌트 if문 함수 사용법 ] 

1) src/componentes/Main.jsx에서 리액트에서 if문 함수 작성 

    -> return 뒤에 <html> 태그가 등장하면 ? 컴포넌트 ! 

    -> JSX 파일에서는 반드시 요소 여러 개를 하나의 요소처럼 감싸줘야 함 ! -> 반드시 <> 사용 

    -> JavaScript 언어를 사용하려면 {중괄호} 사용 

출력결과 : 로그아웃
출력결과 : 짝수 10 1

 

 

2) CSS 적용하는 법 - Main.jsx에서 한 파일 안에서 {중괄호} 사용해서 적용 (CSS에서와 달리 -(대시)가 빠짐)

 

3) CSS 적용하는 법 - Main.css 파일을 생성해서 따로 적용 하는 법 (Main.jsx에서 className으로 설정)

[ Props ]

1) src/components/Button.jsx 파일 생성 -> App.jsx에 Button.jsx 추가 + import Button

    -> App.jsx(=부모컴포넌트) 쪽에서 자식 컴포넌트(=<Button>) 3번 호출

 

2) Button.jsx에서 props사용 -> App.jsx에서 <Button> 호출할 때 text={""} 작업 추가 

     console.log(props); //props값이 객체 형태로 담겨서 출력 됨

 

3)  Button.jsx에서 props사용 하여 style까지 적용 

 

4) props와 객체 구조 분해 할당 문법 함께 사용 !!! (위에 3번과 달리 .props를 쓰지 않아도 사용 가능)

 

5) App.jsx에서 spread 연산자와 함께 사용 !!! <Button> 에 일일히 값을 하나하나 주지 않아도 됨 !

 

6) App.jsx에서 <Button>에 <div>자식 추가 -> Button.jsx에서 const Button = ({text, color, children}) children 추가{children}

 

[ Event 이벤트 ]

1) Button.jsx에서 onClick 익명함수 사용 

버튼 클릭 시 콘솔창에 버튼 이름 출력 됨

 

2) onClick 과 onMouseOver 사용 -> {onClickButton} 함수명으로 사용한다 !!!

버튼을 클릭하거나 버튼에 마우스를 갖다 대기만 해도 콘솔창에 이름 출력 됨

 

3) const onClickButton=(e)=>{ console.log(e); 

     -> 합성이벤트(브라우저마다 이벤트 객체가 달라질 수 있어 리액트에서 여러 브라우저 참고해서 통합 규격을 만들어 놓음)

          e를 출력했더니 콘솔창에 뜨는 값 ( 그냥 이런게 있다 ~ 알아두기)

 

 

[ ⭐️ State ⭐️ ]

 

1) useState - 배열반환하는 메서드 

              - state 값이 바껴야지만 리랜더링(reRendering) - 컴포넌트의 state값이 바뀌면 컴포넌트가 return을 다시한다

                -> 화면을 다시 그린다 -> 그리고 그때, 변경된 state 값도 바로 화면에 반영된다 !! (rePageing)

+ 버튼 누르면 숫자가 0 부터 하나씩 증가

 

켠다 끈다 버튼을 누리면 화면에 OFF ON 출력

 

2) App.jsx에서 Count와 Computer 한번에 작성 

켠다 끈다 누르면 콘솔창에도 출력

 

3) 기능별로 따로 관리해서 작성하는 법 !!!

     App.jsx에선 <Computer /><Count />호출만 -> Computer.jsx와 Count.jsx파일 생성 (반드시 첫 글자 대문자 사용 !!)

 

 

[ Props(properties) ]

   컴포넌트 속성을 설정할 때 사용하는 요소  

   Props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있음 

   defaultProps : Props 기본값 설정 c

   hilderen : 컴포넌트 태그 사이의 내용을 보여주는 props 

   Props는 부모 컴포넌트가 설정하는 값- props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야함

 

[ State ]

    State : 컴포넌트 내부에서 바뀔 수 있는 값

    배열 비구조화 할당 

    Const array=[1,2]

    Const [one,two]=array;

    사본을 업데이트할 떼 => spread 연산자라 불리는 ...을 사용하여 처리  

 

728x90

'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글

스프링부트 JPA [ 다양한 쿼리 생성 방법 ]  (0) 2024.06.20
73일차 리액트 [ State, useRef, React Hooks]  (0) 2024.06.08
71일차 리액트 [ node.js, Vite, react ]  (0) 2024.06.03
61~64일차 스프링 [ xml로 Board 만들기 ]  (0) 2024.05.20
57일차 스프링 [ MVC - restcontroller, mybatis ] [ Board ]  (2) 2024.05.13
'네이버 클라우드 부트캠프/복습 정리' Related Articles more