사진 클릭시 메인 사진 바꾸기 useState

useState를 활용한 기능 구현 중 처음 시도 했던 기능이 사진 클릭으로 메인 사진 변경 기능 구현이었다. 사실 상태를 관리한다는 점에서 모든 상태 관리를 Redux로 해야하는건가라는 고민이 있었지만. 모든 상태 관리를 Redux를 할 필요 없고 적절하게 적용하기로 하였다 사실 고민을 하였지만 이 기능을 Redux로 구현하는것은 실패하였다. 또한 단지 화면에 보여주는 사진만 변경 하는 것이기 때문에 React-Hook으로 구현하는 것이 맞다고 판단하였다.

  const [fullImg, setFullImg]:any = useState([]);

const mainImg = async () => {
  try {
    const response  = await axios.get('https://everycoding.herokuapp.com')
    const mainImg = await response.data.items[1]    
    console.log(mainImg)
    setFullImg(mainImg)
  } catch(err) {
    console.log("Error >>", err);
  }
};

한가지 아쉬운 점은 랜덤형식으로 메인화면 사진을 바꾸는 것은 구현하지 못하였다 get을 통하여 데이터를 요청하여 받아온 값중 마음에 드는 사진을 출력하도록 고정시켜 놓았다. 그리고 setFullImg(mainImg) 상태값을 변경하도록 설정하여 이미지를 받고 변수로 설정하였다.

<img className='thumImg'  
                    src={ele.img} alt="" onClick={() => onImgChange(ele)}>   
                  </img>

const onImgChange = (ele: {
    id: number;
    name: string;
    img: string;
    price: number;
    text: string;
    textBox: {
        id: number;
        name: string;
        text: string;
    }[];
}): void => {    
    console.log(ele);
    setFullImg(ele);    
  }

onClick을 통하여 클릭한 사진이미지는 onImgChange 함수를 호출하게 되고 받아온 파라미터 값은 다시 setFullImg(ele); 상태값으로 지정되어 변경 되는 코드로 구성하였다. 직접 만들면서 사용해보는것과 따라치는것은 전혀다른것 같다 프로젝트하면서 많이 느낀다.