[2024~2025 동계모각코] 6회차 결과

52강

변수를 이용해 화면에 보일 내용을 그때그때 값을 다르게 저장해줄 수 있음

ui 업데이트 시 리액트에 의해 재평가되어야 함 >> 이게 감지되면 업데이트 될 거임

기본적으로 리액트는 코드를 한 번밖에 실행하지 않는것을 반드시 염두에 두기

리액트는 각각의 컴포넌트 함수를 볼때마다 실행 > >버튼이 4개면 4번 실행

컴포넌트 함수가 재실행되어야 함을 알려줄 방법이 필요함 >> 상태

53강

상태

import { useState } from ‘react’;를 통해 변수를 추가함

그후 App() 에서 useState();를 통해 호출 (반드시 함수의 최상위에서 호출되어야 함)

내부 함수 중첩, if, loop문 사용 불가

selectedTopic : 현재의 스냅샷 (초기값이 저장됨)

setSelectedTopic : 항상 함수임(리액으에서 제공, 업데이트 위함)

컴포넌트 함수 다시 실행해야 됨을 알려줌

이러고 인제 handleSelect()함수 안에다가 이걸 넣어주면 됨!

버튼 누를때마다 콘솔에는 예전값이 뜸

상태 업데이트 함수 부를 때 컴포넌트 함수가 실행이 다시 되는데 이게 다 끝나야 새로운 값이 저장이 된다. 그래서 console.log에는 여전히 예전 값이 뜨는거다

54강

역시 data.js에 저장된 것을 들고옴

식별자가 객체와 일치해야 함을 주의하며 사용하기

EXAMPLES[selectedTopic].title 이렇게 사용함

콘솔에 오류 ( 처음 시작할 때 유효값이 없음) >> 유효값 지정으로 해결

55강

조건적 내용 출력

주제를 골랐을 때만 출력하게 하고 싶음 그렇지 않았을 때의 기본값 설정

• 동적인 내용 출력 위한 삼항 연산자 사용
  • 선택한 주제가 없을 경우 랜더링 되는 경우가 정해짐
• div 전체 보여주는 것일수도
• 두 개의 동적인 부분 사용하는 것도 방법임
  • && 기호를 사용해서 else의 내용을 없애는 것도 하나의 방법임
• 변수 사용
  • tabContent를 만들어서 기본 상태의 문단을 저장한다.
  • if문을 실행해서 selectdTopic에 따라 div의 내용을 저장해주는 등 작업을 수행한다.
  • 이것은 함수 상단에서
  • 그러면 div에서 tabContent해놓으면 알아서 보이겠지

56강

css 스타일링 및 동적 스타일링

tabButton.jsx에서 className=”active”을 설정해준다.

이게 버튼이 활성화되었는지 여부나타냄

이걸 동적으로 설정해야 함

isSelected와 같은 변수를 통해서 active 여부를 구분할 수 잇도록

삼항연산자 방식 사용 > 속성의 조건부 출력 가능

57강

list 동적 출력

자동으로 배열에 있는 항목에 맞춰 출력하게 하기!!

배열.map을 통한 함수를 사용하면 자동으로 배열의 내용을 받아오나 봄

여기의 실행 함수 부분에 <CoreConcept로 작성두었던 아까의 목록 코드를 넣으면 됨

key의 여부에 따라 경고가 보이고 안 보이고가 다름