728x90 리액트67 [리액트] Lifecycle / useEffect(훅) / clean up function Lifecycle- 컴포넌트 인생주기- 컴포넌트 인생 중간중간에 간섭 1. 생성 (mount)2. 재렌더링(update)3. 삭제 (unmount)간섭 방법 >>= 갈고리(훅) 달아서 간섭 갈고리 다는 법(구버전)class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 삭제되기전에 실행할 코드 }} 갈고리 다는 법(요즘 버전)- useEffect 함수 useEffect 함수 사용 방법 - impor.. 2024. 5. 27. [리액트] 외부 페이지 데이터바인딩 / URL 파라미터 문법 / useParams() 상세페이지(Detatil.js) 에 상품명 넣기 상품명 - shoes state = function App (App.js)에 존재. 상세페이지(Detatil.js) 에 상품명 넣기.= props 사용// Detail.jsfunction Detail(props) { return ( 상품명 상품설명 120000원 주문하기 );}export default Detail;상품명 데이터 바인딩해주기.///detail 접속시 html 이쁜거 보여달라function Detail(props) { return ( .. 2024. 5. 27. [리액트] 외부 파일 컴포넌트 넣기 / useNavigate() / nested routes / Outlet detail 접속시 보여주고 싶은 html 보여주기 - 다른파일로 뺀 다음 거기서 컴포넌트를 만들어서 넣기. {/* 디테일 페이지 */} 상세페이지임} />저기 element 속성 부분에 컴포넌트 예정.= element 속성 부분= element={ }컴포넌트 생성- 함수 쓰고 return 문 써주기.///detail 접속시 html 이쁜거 보여달라function Detail() { return ( 상품명 상품설명 120000원 주문하기 );}export default Detail;- Detail.js 파일 s.. 2024. 5. 26. 리액트에서 탭 UI 만들기 보호되어 있는 글 입니다. 2024. 5. 22. 리액트에서 서버와 통신하려면 ajax 2 : post, fetch 보호되어 있는 글 입니다. 2024. 5. 22. 리액트에서 서버와 통신하려면 ajax 1 보호되어 있는 글 입니다. 2024. 5. 22. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음 728x90
