홍가의 코딩공부

안녕하세요 홍 가 입니다. 리액트 훅에 대해 설명을 해보려고 합니다. 리액트 훅이란 리액트 버전 16.8부터 도입이 되었으며 함수형 컴포넌트가 클래스 컴포넌트 기능을 사용할 수 있게 되었습니다. 함수형 컴포넌트에서 상태관리가 가능해졌으며 라이프사이클 메소드를 사용 가능합니다. 제가 주로 사용하는 useState, useEffect 에 대해 설명을 해보려고 합니다. 우선 오늘은 useState로 컴포넌트 상태관리를 해보겠습니다. useState란 컴포넌트서 상태관리를 할 수 있는 상태 값 입니다. 많은 예가 있지만 가장 단순한 카운터로 설명 해드리겠습니다. 우선 이렇게 구조를 만들고 진행했습니다. 이렇게 useState라는 React hook을 사용해서 카운터를 완성 했습니다. 과거 리액트에서 functi..

React 공부 2023. 7. 26. 12:50

안녕하세요 홍 가 입니다. 오늘은 전에 올렸던 리액트 기초 공부를 좀 더 추가해서 올려보려고 합니다. 우선 jsx로 사용하여 HTML문법을 사용하여 만들었습니다. style은 직접 넣어서 사용이 가능하거나 const로 스타일을 넣어 사용이 가능하고 css파일을 사용하여도 사용이 가능합니다. CSS-in-JS라는 styled-component를 사용해서 스타일 작업도 가능합니다. Study파일에는 Props를 사용했으며 App파일에 Study컴포넌트 부분에 name, color, isSpecial를 적어놨다 컴포넌트 부분에 적어두고 파일로 돌아와서 () 안에 {}를 넣고 그 안에 적어둔 내용을 적고 사용하면 Props가 사용이 된다. props사용시 주의할점은 다 {}로 사용 하면 안되고 style부분은 ..

React 공부 2023. 7. 24. 13:43

안녕하세요 홍 가 입니다. 오늘은 리액트 기초인 props, component, css를 알려드리려고 해요. 우선 css는 3가지가 있습니다. 저희가 주로 쓰는 css파일에 넣기 다른 건 module을 이용하기 마지막은 태그에 직접 이용하기. 이런식으로 태그를 세분화하여 바탕색을 넣어주면 그 태그가 어느 부분을 차지하는지 알 수 있어 작업시 편리합니다. HelloWorld는 module.css를 사용했습니다. 클래스네임에 {}를 넣어 사용해 줍니다. props를 사용하여 바꾸기가 가능하고 component에도 적용이 되는것을 볼 수 있습니다.

React 공부 2023. 5. 19. 10:00

안녕하세요 홍가 입니다. 오늘은 리액트 기초에 대해서 설명을 해드리려고 해요. 리액트는 자바스크립트의 라이브러리 중 하나이며 사용자 인터페이스를 만들기 위하여 만들어졌다. 리액트는 왜 라이브러리인가요? 프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있음. 일정한 형태를 가지고 다양한 형태의 결과물을 만든다. 라이브러리 : 소프트웨어를 개발할 때 공통으로 사용될 수 있는 특정한 기능들을 모듈화를 한 것이다. 둘의 차이점은 제어의 흐름의 권한 차이이다. 리액트를 생성할 때는 저는 VSCode를 사용하고 있습니다. npx create react app 파일명 터미널 부분에 이 명령어를 작성하시면 파일이 생성이 되고 생성된 파일을 실행시켜려면 npm start 작성하시면 됩니..

React 공부 2023. 4. 15. 23:35