![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbIv5lS%2FbtrFt8LYNJc%2F3YkCe8BQDHDpP2jdwqSjn1%2Fimg.jpg)
[React] NavLink
2022. 6. 22. 23:34
개발이야기/React.js
NavLink => NavLink는 nav에서 사용하는 링크로 기존의 link와의 차이점은 스타일프롭으로 함수를 지정할 수 있다는 것! 간단하게 웹에서 메뉴를 클릭하면 그 밑에 'active' 효과가 나타나는걸 우리는 자주 볼 수 있다. style 작업을 해줘도 되지만 .... NavLink를 써보면? 카탈로그 커뮤니티 navlink로 감싸고 스타일 함수를 만들어서 안에다가 넣을 수도 있다 const getLinkStyle = ({ isActive }) => { return { textDecoration: isActive ? "underline" : undefined, }; }; 간단하게 사용가능! NavLink는 스타일프롭으로 함수를 지정할 수 있다는 것!
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhjGob%2FbtrEHXjURB7%2F27AJgTK82EzU7uNk9YcTfK%2Fimg.jpg)
[React] 조건부 렌더링
2022. 5. 28. 19:11
개발이야기/React.js
조건부 랜더링 : 어떠한 조건을 주어서 '버튼'이 안보이게끔 만들어보자. return ( 최신순 베스트순 {hasNext && 더 보기} ); }; 조건을 줄 코드에 중괄호로 감 싼 다음 hasNext &&를 적어준다. 이렇게 적으면 hasNext의 값이 참 일 경우 뒤에 있는 값을 실행한다. (hasNext가 있으면 더 보기를 보여줘~) 만약에 hasNext 값이 거짓이면 뒤에 있는 값이 실행되지않고 앞에 적힌 hasNext 값을 사용하는데 이 값은 false이다. (hasNext가 없으면 더 보기 false) 리액트에서 false값은 렌더링하지않기때문에 버튼이 보이지않게 된다.
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FswEG1%2FbtrEIsjqDAf%2FHkCfr5EY2kRepYOm1pBO10%2Fimg.jpg)
[React] useEffect 의존성 배열
2022. 5. 28. 15:29
개발이야기/React.js
의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다. 의존성 배열은 잘못 관리하면 쉽게 버그로 이어지기 때문에 입력하지 않는게 좋지만 필요에 있어 입력할 일이 생긴다. 그 필요에 의한 경우를 살펴보자. 👇 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }); 위의 코드의 fetchUser가 렌더링될 때마다 호출되기 때문에 비효율적이다. 이럴때 의존성배열을 사용해줌 👇 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }, [userId]); 의존성 배열에 userId 상태 값을 넣으면 userId가 변경될 때만 fetchUser 함수가 호출된다. ..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcUOpzR%2FbtrEGK6pcN8%2FiWidQeC6KLJI9m2Ia9wi7k%2Fimg.jpg)
[React] useEffect (feat. 무한루프)
2022. 5. 28. 04:23
개발이야기/React.js
처음 페이지를 열었을때 알아서 데이터를 불러오도록 만들어주는 'useEffect' 훅을 알아보자. import { useEffect, useState } from "react"; import { getReviews } from "./api"; import ReviewList from "./components/ReviewList"; const App = () => { const [items, setItems] = useState([]); const handleLoad = async () => { const { reviews } = await getReviews(); setItems(reviews); }; handleLoad(); return ( 최신순 베스트순 불러오기 ); }; export default..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSMpMU%2FbtrEHVfi87c%2FsYRx7K8jkzIiEBlM60zdHk%2Fimg.jpg)
[React] 배열에서 key 를 넣어줘야 하는 이유?
2022. 5. 28. 03:30
개발이야기/React.js
map () 를 사용할때, 콘솔에 자주 뜨는 경고메세지.... '리스트의 자식들은 반드시 고유한 key prop 을 가져야한다' 그럼 키 값을 왜 넣어줘야할까? 1. 랜더링이 될때마다 모든 값을 체크해야하는데 그 과정에서 리액트가 힘들어 한다. => 리액트에는 랜더링이 존재한다. 예를들어 어떤 컴포넌트 안에 리스트가 있다면 리스트에대한 키 값을 넣어주는데 리액트가 리스트에 대한걸 랜더링이 될 때마다 체크를 한다. 10개의 리스트가 있었는데 그중에 어떤것이 변경 또는 삭제가 되면 그걸 랜더링할때 빨리 알아차리게 하려고 키 값을 부여해준다. 2. 요소들이 순서가 바뀌면 엉뚱한 위치에 랜더링이 될 수 있기 때문에 반드시 키를 지정해줘야한다. 여기서, index는 키 값으로 넣는걸 권장하지않음 => 이유는? 키..