react 썸네일형 리스트형 <Reactjs>useState로 동적 문서 만들기 정적인 문서 말고 사용자와의 인터랙션을 통해 컴포넌트에서 동적으로 보여주기 위해 어떻게 하면 되는지 알아보장. 아주 고전적이고도 많이 본 숫자 증감을 예로 들어서 간단하게 원리만 파헤쳐 보겠다. 이런식으로 Counter 컴포넌트를 만들어준 뒤에 버튼을 눌러서 콘솔창을 확인해주면 +1 과 =1 이 잘 찍히는 것을 볼 수 있을 것이다. 아직은 저 0 이라는 값을 조절해주지 못하는데 'useState'를 이용해서 한번 조작해보겠당! 위 코드의 const [number, setNumber] = useState(0); number는 현재상태 , setNumber는 상태를 바꿔주는 함수, useState(0) 은 초기값으로 0을 넣어주겠다는 뜻이다. 바뀐 상태값을 보여줘야 하기 때문에 정적으로 0을 박아놨던 부분에.. 더보기 <Reactjs> 프로젝트 만들기 리액트란 우선 간단히 무엇인지 알고 넘어가자 리액트는 페이스북에서 제공해주는 프론트엔드 "라이브러리" 이다. 또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 리액트를 왜 사용하는가? 사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다. 그러나 html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다.리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다. 어느정도 규모있는 프로젝트를 진행하다보면 위의 사진과 같이 복잡한 관계를 가지게 된다. 리액트는 업데이트가 필요한 UI를 메모리에 있는 가상의 돔에 뿌려준뒤 실제 브라우.. 더보기 이전 1 다음
