천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: ,

map을 이용하여 반복문 돌리기 (v-for)

// 반복문 돌릴 객체에 map을 사용하여 표시할 태그를 작성한다.
{movies.map((movie) => {
	// 이미지가 안나옴
  <img
  key = {movie.id} 
  // 포스터가 만약 상단 행에 존재하는 것이라면 다르게 스타일링을 적용하기 위해
  className={`row__poster ${isLargeLow && "row_posterLarger"}`}
  src={`https://image.tmdb.org/t/p/original${isLargeLow ? movie.poster_path : movie.backdrop_path}`} 
  alt={movie.name} />
})}

슬라이드 기능

scrollLeft , scrollright 를 이용하여 기능 구현

해당 기능을 사용 함수를 실행할 때 일정 범위마다 이동하도록 할 수 있다.

<span className='arrow'
  onClick={() => {
    document.getElementById(id).scrollRight += window.innerWidth - 80;
  }}
>{">"}</span>

특정 상황에서의 스타일링

  • 호버시
    &:hover {} 를 이용하여 안에 호버시 적용할 스타일을 적는다.
  • 화면 크기에 따라 반응형으로 제작할떄
    @media (max-width: 768px) {} : 768px 미만이면 안에 태그를 적용한다.

모달

  1. 클릭 하였을 때 모달창을 띄운다

     // 모달창을 클릭하였을 때 MovieModal이 나오도록
 // movie의 상세정보를 props로 넘겨준다.
 {modalOpen && <MovieModal {...movieSeleted} setModalOpen={setModalOpen}/>}

  2. 모달창 내부에 영화 상세요청을 한다 ⭐참고 useEffect(() ⇒ {}, []); 작성시 빈배열을 넣는 이유 useEffect는 값이 바뀔 때 마다 다시 실행된다.
    두번재 인자로 빈배열을 작성하게 되면 useEffect의 함수가 한번만 실행된다.

infinite loop

  1. 처음 데이터 실행은 useEffect안에 작성

  2. setState의 값은 직접변경하는 게 아니라 변수를 사용하여 변경

     function App() {
   const [count, setCount] = useState(0);
    
   useEffect(() => {
     setCount(previousCount => previousCount + 1)
   }, [])
    
   return ...
 }

  3. 이벤트 핸들러는 아래와 같이 작성

     export default function App() {
   const [count, setCount] = useState(0);
    
   return (
     <button onClick={() => setCount(1)}>Submit</button> // infinite loop
   );
 }

태그안에 특정기호 작성하기

태그 안에서 < 표시를 보여주고 싶을때
{"<"} 형식으로 작성해야 페이지 내에서 < 가 잘 보인다.

참고