코딩애플 리엑트 강의 정리

1. Function 을 통해 컴포넌트를 만들어 불러와서 실행시키는 식으로 사용할 수 있다. return() 소괄호 안에 들어가는 내용들이 HTML처럼 작동된다. (완전 똑같지는 않다.)

function Component(){

return (
<>
<p>하이</p>
<Component2/> //이런 형태로 따로 작성한 컴포넌트를 불러올 수 있다.
</>
)}

function Component2(){

return (
<div>하이이이이이</div>
)}

2. useState를 통해 data의 상태를 관리하거나 UI상태를 변경할 수 있다. useState는 return()문 사용 전에 작성한다. #useState

//data import해오기
import data from './data.js';


function Component(){

//아래와 같은 형태로 사용된다 - setItems는 items를 변경시키는 함수임
let [items, setItems] = useState(data);
//data 추가시키는 변수 만들기
const addItems = (newItems) => {
setItems([...items, ...newItems]);
};

return (
<Routes>
//useState를 props로 다른 컴포넌트/라우트로 전달하는 방법
	<Route path="/" element={<Items items={items} addItems={addItems} />} />
</Routes>
)}

function Items({items}){

return(
<>
<Button
variant="success"
onClick={() =>
axios
.get('https://codingapple1.github.io/shop/data2.json')
.then((result) => {
console.log(result.data);

// 불러온 데이터로 html 생성하는 방법
// 불러온 데이터 형태 확인 console.log(props.items);
let copy = [...items, ...result.data];
console.log(copy); //데이터 추가된 것 확인
addItems(result.data);})
.catch((error) => {
console.log('데이터 불러오는데에 실패함');
})
}
>더보기</Button>
</>
)
}

3. Route와 Nested Routes #NestedRoutes #Route
   1. Route를 중첩해서 사용할 수 있다.
   2. 중첩된 Route는 부모 Route의 파라미터를 사용할 수 있다.
   3. 중첩된 Route는 부모 Route의 element를 사용할 수 있다.
   4. Nested Routes에는 /about/member 등으로 접속할 수 있다.
   5. 5./about/member의 element내용을 보여주고 싶은 경우 부모 Routes에 Outlet(보여줄 곳)을 사용한다.

<Routes>
	<Route path="/" element={<Items items={items} addItems={addItems} />} />
	<Route path="/detail/:id" element={<Detail items={items} />} />
	{/** Nested Routes */}
	<Route path="/about" element={<About />}>
		<Route path="member" element={<div>Nested Routes 테스트</div>} />
	</Route>

	{/* 404페이지 만드는 방법 */}
	<Route path="*" element={<div>없는 페이지 컴포넌트</div>} />
</Routes>

{/** Nested Routes */}
function About() {
  return (
    <div>
      <div>
        하이하이
        <Outlet />
      </div>
    </div>
  );
}

4. useNavigate를 아래와 같이 사용한다. href 등 대신으로 사용함 #useNavigate

function Card(props) {
let navigate = useNavigate();
return (
	<Col
	key={props.item.index}
	onClick={() => navigate(`/detail/${props.item.index}`)}
	>	
		<div>
			<img
			src={props.item.picture}
			alt={props.item.name}
			style={{ width: '150px', height: '150px' }}
			/>
			<h4>{props.item.name}</h4>
			<p>{props.item.index}</p>
			<p>{props.item.money}</p>
		</div>
	
	</Col>
);

5. styled-component로 스타일링 하기 #styled-component
   1. styled components는 다른 js 파일에 간섭하지 않음
   2. styled.htmlTag로 스타일링 할 수 있음
   3. CSS파일 작명을 Detail.module.css로 Detail.js에만 적용됨
   4. 비슷한 모양의 컴포넌트를 만들려고 하면 가변적인 부분을 적용할 수 있음.(삼항연산자 사용) - 양쪽props에 $을 붙여야함
   5. 기존에 있던 스타일들을 상속받아 사용할 수 있음.
   6. 중복 스타일은 컴포넌트간 import 해서 사용할 수 있음.

let BlackBtn = styled.button`
  background-color: ${(props) => props.$bg};
  color: ${(props) => (props.$bg === 'black' ? 'white' : 'black')};
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;
상속받기
let NewBtn = styled(BlackBtn)`
  background-color: red;
`;

6. useEffect를 사용해 랜더링/useState 값이 바뀔때마다 함수 실행하기 #useEffect

    /**
     * 마운트, 업데이트시 코드를 실행해줌 - 2번 실행됨
     * 업데이트 = useState 사용할 때 실행됨
     * HTML 렌더링 후에 동작
     */
     
  //재랜더링마다 코드 실행시
  useEffect(() => {});
  
  //useEffect 실행 전에 실행
  useEffect(() => {
    return () => {};
  }, [count]);
  
  // 컴포넌트가 마운트될 때만 코드 실행
  useEffect(() => {
    if (isNaN(count) === true) {
      alert('숫자만 입력해주세요');
    }
  }, [count]);
  
  //unmount 시 코드 실행
  useEffect(() => {
    return () => {};
  }, []);

7. useParams로 url 파라미터 가져오기

// 현재 url 파라미터 가져오기
  const { id } = useParams();
  
  //find 메서드로 해당 id에 해당하는 상품 찾기
  const item = props.items.find((item) => item.index === id);
  if (!item) {
    return <div>없는 페이지 컴포넌트</div>;
  }

8. Tap UI 만들기 #TapUI

        let [tap, setTap] = useState(0);
        // return문 아래
      <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link eventKey="link0" onClick={() => setTap(0)}>
            버튼1
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link1" onClick={() => setTap(1)}>
            버튼2
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link2" onClick={() => setTap(2)}>
            버튼3
          </Nav.Link>
        </Nav.Item>
      </Nav>
      <Tap tap={tap} />

//탭을 위한 컴포넌트 생성
// props.어쩌구 없이 하는 방법
function Tap({ tap }) {
  /** 기본 if문을 이용한 탭UI
  if (tap === 0) {
    return <div>탭1</div>;
  } else if (tap === 1) {
    return <div>탭2</div>;
  } else if (tap === 2) {
    return <div>탭3</div>;
  }*/
  let [fade, setFade] = useState('');
  useEffect(() => {
    setTimeout(() => {
      setFade('after');
    }, 100);
    return () => {
      setFade('');
    };
  }, [tap]);

  //다른 방법
  return (
    //<div className={`before ${fade}`}>
    <div className={'before ' + fade}>
      {[<div>탭1</div>, <div>탭2</div>, <div>탭3</div>][tap]}
    </div>
  );

9. 전환 애니매이션 주기

  /**전환 애니메이션 주는 방법
   * 1. 재생 전 className 만들기
   * 2. 재생 후 className 만들기
   * 3. className에 Transition 적용
   * 4. 원할 때 2번 className 실행
   */

.before {
  opacity: 0;
}
.after {
  opacity: 1;
  transition: opacity 0.5s;
}

  useEffect(() => {
    /**
     * 마운트, 업데이트시 코드를 실행해줌 - 2번 실행됨
     * 업데이트 = useState 사용할 때 실행됨
     * HTML 렌더링 후에 동작
     */
    let a = setTimeout(() => {
      setSwitchBox(false);
    }, 2000);
    return () => {
      //useEffect 동작 전에 실행됨
      clearTimeout(a);
    };
  }, [switchBox]);
//return 뒤
    //<div className={`before ${fade}`}>
    <div className={'before ' + fade}>
      {[<div>탭1</div>, <div>탭2</div>, <div>탭3</div>][tap]}
    </div>

10. axios 사용하기 #axios

/** axios 요청 여러개 받는 방법
 * Promise.all([axios.get(), axios.get()]).then((result) => {
 *  console.log(result);
 * })
 */