2주프로젝트(WebPaper_day07 : React Hooks)

기사의 클릭수를 저장하기위해 리액트 훅을 사용하기로 결정

비슷한 예시들을 찾아보기로

처음엔 클릭수를 저장해서 넘겨주려 했으나

이벤트가 클릭되면 Api에 아이와 카테고리를 포스트 하는 방식으로 

=> 공부해야할것 : React Hooks, axios 

 

오피스아워

- 훅스 보다 기존 기술을 먼저 연습 

- 커밋을 중요하게 생각하자

 

Hooks

useEffect 사용해서 Data fetch하기 

export default () => {
    const [count, setCount] = useState(0);
    const [person, setPerson] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(async () => {
    	const response = await fetch('https://');
        const data = await response.json();
        const[item] = data.results;
        setPerson(item);
        setLoading(false);
        }, []);
        
   return (
   	<div>
    	<p>You clicked {count} times</p>
        <button> onClick={() => setCount(count+1)}>Click me</button>
        {loading ? <div>...loading </div> : <div>{person.name.first}</div>
    </div>
    );
};

 

useFetch 따로 만들기

const useFetch = url => {
	const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    
    uesEffect(async () => {
    	const response = await fetch(url);
        const data = awiat response.json();
        const [item] = data.results;
        setData(item);
        setLoading(false);
        }, []);
        
        return {data, loading};
};

export default () => {
	const [count, setCount] = useState(0);
    const {} = useFetch('https://');
    
    return (
    	<div>
        	<p> You clicked {count} </p>
            <button onClick={()=> setCount(count+1)}>Click me </button>
            {loading ? <div>...loading</div> : <div>{person.name.first}<div>}
        </div>
        );
   }

// useEffect(() => {fetchData()}, [])

const fetchData = async() => { /* await fetch */}

 

Axios

axios.get('url')
	 .then(res => {
     console.log(res);
     this.setState({persons:res.data});
     });
     

axios.post('url', {user})
	 .then(res => {
     	console.log(res)
      });
      

 

기존의 class 컴포넌트를 써서 온클릭 발생시 업데이트 처리하기

 

handleClick 함수에서 바로 포스트 하는식으로 처리?