프론트엔드 정복하기

React hooks로 탭 기능을 어떻게 구현할까. 아래 그림처럼 상단에 탭타이틀이 있고, 하단에 탭 콘텐츠가 있으며, 각 탭 타이틀을 클릭할 경우 해당 컨텐츠가 보이도록 할 것이다. 1 ) 탭타이틀을 클릭하면 해당 타이틀에 'is-active'라는 class를 부여해서 포커싱된 탭에 맞는 스타일을 부여할 것이고, 2 ) 각 탭을 클릭하면 해당하는 콘텐츠만 화면에 보여지도록 할 것이다. 먼저 (1) 탭 Title, (2) 탭 Content를 담은 배열을 선언한다. const tabContArr=[ { tabTitle:( 탭1 ), tabCont:( 탭1 내용 ) }, { tabTitle:( 탭2 ), tabCont:( 탭2 내용 ) } ]; return되는 템플릿에 map 함수를 사용해서 각 obj의 탭..

... useEffect(() => { console.log("컴포넌트 시작") return () => { console.log("컴포넌트 종료 ") } }, []) ... array dependency를 [ ] 빈 상태로 두면 => componentDidMount와 비슷한 기능을 한다. 컴포넌트를 호출하면 => '컴포넌트 시작' 이 출력된다. return을 사용하면 => componentWillUnmount와 같은 기능을 한다. 컴포넌트가 종료되면 => '컴포넌트 종료'를 출력한다. 여기서, componentWillUnmount란?) 컴포넌트가 소멸된 시점에(DOM에서 삭제된 후) 실행되는 메소드다. 컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.

자식 컴포넌트에서 변화되는 state을 부모 컴포넌트에서도 바로 바로 반영받고 싶다면 어떻게 해야 할까? 1. 부모 컴포넌트에서 update 함수를 자식에게 props로 넘겨준다. -update 함수 const [SomeState, setSomeState] = useState("") //state 생성 const updateState = (newCont) =>{ //newContents를 state에 setting하는 함수 생성 setSomeState( newCont ) } //자식 컴포넌트에 update function을 props로 상속한다. 2. 자식 컴포넌트에서 변화하는 state를 부모컴포넌트로부터 상속받은 refreshFunction에 입력해준다. //자식 컴포넌트 //예를 들어 input 태..

1. route를 만들 때 /video/:videoId 2. List에서 3. 디테일페이지에서 const variable = props.match.params.videoId ; (주소창에서 videoId로 입력된 id를 가져올 수 있음.) axios로 variable을 보낸다. 해당 정보들을 가져온다.

const OPTIONS = [ {value:1, label:"1번 옵션"}, {value:2, label:"2번 옵션"}, {value:3, label:"3번 옵션"}, {value:4, label:"4번 옵션"}, {value:5, label:"5번 옵션"},]const Component = () => { const [selectedValue, setSelectedValue] = useState(); const handleChange = (e) => { setSelectedValue(e.currentTarget.value) } return ( {OPTIONS.map((option)=>( {option.label} ..

1) useState 설정 const [Products, setProducts] = useState([]) const [loading, setloading] = useState(false) const [currentPage, setcurrentPage] = useState(1) const [productsPerPage, setproductsPerPage] = useState(10) 2) useEffect에서 데이터 불러오기 useEffect(() => { setloading(true); let body={category:'인생뷰티'} Axios.post('/api/product/lists', body) .then(response=>{ if(response.data.success){ setProducts(..