지니리 개발일지

리액트에는 컴포넌트 형태에 따라 생명주기 메서드(Lifecycle)가 다르다. 즉 class component, function component에 따라 lifecycle 함수가 달라진다는 것이다. 그래서 지난 글에 썼던 "React Lifecycle | 클래스 컴포넌트 라이프사이클" 에서 사용한 클래스형 컴포넌트 라이프 사이클 함수는 함수형 컴포넌트에서는 사용할 수 없다. React Lifecycle | 클래스 컴포넌트 라이프사이클 리액트 공식 홈페이지를 살펴보면 모든 컴포넌트는 여러 종류의 “생명주기 메서드(Lifecycle method)”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다고 jjinlee.tistory.com useEffect 기본 형태 useEff..

리액트 공식 홈페이지를 살펴보면 모든 컴포넌트는 여러 종류의 “생명주기 메서드(Lifecycle method)”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다고 나와있다. 쉽게 말하면 리액트는 만든 컴포넌트를 실행하는 render() 같은 함수 등 유용한 함수를 제공한다는 것이다. 생명주기라는 말 그대로 컴포넌트가 DOM에 생성 될 때부터 DOM이 제거될 때까지 주기를 설정해주는 것이다. 예를 들어 특정 컴포넌트는 계속 렌더가 되길 원하는 것이 있을 수도 있고, 또 어떤 컴포넌트는 특정한 시점에서만 렌더 되길 원하거나 종료되길 원할 것이다. 클래스형으로 작성된 리액트 작업물에선 class component lifecycle 메소드를 사용하여 컴포넌트의 생명주기를 설정..

React 훅(hook) : useState 리액트에서 일반 변수로 만든 UI는 변화하지 않는다. 리액트에는 훅(hook)이라는 리액트가 제공하는 유용한 함수들이 있는데 이중에서 반응하는 UI의 상태를 관리하는 훅은 useState이다. useState는 아래와 같이 사용한다. 배열을 반환하는 state와 이 state를 바꿔주는 함수가 들어가는데 set + state명의 첫글자를 대문자로 작성한다. 그리고 매개변수를 받는데 이건 state의 초기 값이다. const [state, setState] = useState(0); useState는 비동기로 동작한다. 일반 변수와 state의 변화를 확인하기 위해 작성해본 코드이다. 버튼을 클릭한 후 UI와 콘솔을 확인해봤다. 일반 변수의 UI는 변하지 않았고..

리액트는 코드의 재활용성이 높다. UI를 재사용 가능한 여러 조각으로 나누는데 이것을 컴포넌트(component) 단위로 나눠서 작업한다고 한다. 즉 내가 원하는 것을 모아서 하나의 태그로 만들어 쓰는 셈이다. 이렇게 컴포넌트를 잘 활용하게 되면 여러 곳을 한 번에 바꿔야 할 때 한 번만 바꾸면 되기 때문에 유지보수에 좋다. 또 component에 props를 사용하면 비슷한 UI를 만들 수 있다. 컴포넌트 안에서 조금씩 달라지는 부분에서 props를 활용하면 리액트 코드 재활용성을 높힐 수 있는데 내용이나 이미지뿐만 아니라, css에서도 조금씩 달라지는 부분에서만 활용할 수 있다. 렌더를 해주는 App.js에서 속성 값을 주고, 각 컴포넌트 안에서는 매개변수로 props를 받으면 된다. 컴포넌트 안에서..

React 시작하기 리액트를 시작하기 전 노드를 설치해야 한다. Node.js 설치하는 법은 이전에 작성했던 글을 참고하면 된다. [Node.js] Mac에서 Node.js 설치하기 노드를 설치 후 터미널에서 아래와 같이 입력하면 폴더가 생성되고 그 폴더 안에는 리액트에 필요한 파일들이 저장되어 있다. npx create-react-app 폴더이름 폴더 이름을 first-react라고 설정했고 생성된 폴더 경로에서 npm start를 입력하면 웹에서 아래 사진과 같은 화면이 보인다. npm start 리액트를 사용하는 이유 자바스크립트만으로 개발하기 불편하다. 자바스크립트를 사용하여 개발할 때 웹에 보여주기 위해서 html 파일에서 하나하나 id를 주고 document.getElementById(); 메..

지난 리액트 프로젝트에서 css로 스타일링했는데 프로젝트가 끝날 때쯤 styled-components를 사용하면 디자인 측면에서도 재활용성을 높일 수 있음을 알게 됐다..그래서 새로운 프로젝트를 하면서 styled-components를 사용해볼 것, 스타일링 재활용을 조금이라도 해볼 것을 목표를 잡았고, 사용했던 것을 기록해보려고 한다! 리액트에서 컴포넌트를 스타일링할 때 새로운 기술을 익힐 필요 없이 CSS, SASS를 사용할 수 있지만 CSS-in-JS 라이브러리인 styled components를 사용하면 아래와 같은 방법들로 재사용성을 높일 수 있다. 0. styled-components 사용하기 npm install --save styled-components 우선 프로젝트 안에서 styled-..

프로젝트를 하면서 맡고 있는 부분에 복사 기능을 구현하면 좋겠다는 생각을 했다. 아직은 리액트가 어려워서 삽질을 좀 오래하다가 동기의 도움으로 기능 구현을 마무리 할 수 있었다. 내 능력 100% 발휘해 기능을 완성한건 아니지만 다음엔 비슷한 부분에서 헤매지않게 기록해두려고 한다! 참고한 사이트: https://blog.logrocket.com/implementing-copy-clipboard-react-clipboard-api/​ 나는 DB에서 불러온 값을 화면에 출력했고 사용자가 아이콘을 클릭할 때 그 값이 복사되어 어디든 붙혀넣을 수 있는 기능을 구현하고자 했다. 데이터베이스에서 가져와 화면에 출력 될 데이터를 useState 함수를 사용하여 clipCopy에 초기화 시켰다. 그리고 사용자가 누를 ..