React/일반 (15) 썸네일형 리스트형 리액트 프로젝트 폴더 구조와 컨벤션 규칙 여러 사람과 협업을 할수록 규칙은 중요하다. 규칙 없이 마구 개발하면 서로가 작성한 코드의 의도를 파악하는 데에 더 많은 시간을 쏟게 되고 오히려 혼자서 개발하는 것보다 못한 퍼포먼스를 낼 수도 있다. 여러 규칙 중 폴더와 파일을 어떻게 배치할지를 잘 정하는 게 중요하다고 생각한다. 아무리 세부 코드가 엉망이어도 파일 구분이 명확하면 엉망인 코드와 상관없이 다른 파일(또는 모듈)에서 좋은 코드를 짤 수 있고 추후 필요시 엉망인 코드를 손 볼 수 있다. 또한 코드 퀄리티 자체가 별로라고 해도 props 등의 인터페이스가 명확하고 제대로 작동한다면 그저 모듈을 사용하는 것일 뿐이지 세부적인 복잡한 로직을 들여다 볼 필요는 없다. 마치 node module을 쓰듯이 말이다. 필자가 여러 프로젝트를 진행하면서 .. React의 JSX 문법 이해하기 리액트의 각 컴포넌트는 하나의 함수이고 JSX 문법 형태로 된 값을 리턴한다. JSX를 사용하는 이유는 HTML 마크업 랭귀지와 비슷하게 생겨서 컴포넌트가 어떤 엘리먼트로 구성돼 있는지 한 눈에 파악하기 쉽기 때문이다. 그러나 JSX는 결국 자바스크립트이고 JSX의 각 요소들이 무엇을 의미하는지 알아야 다양한 방식으로 리액트를 구현할 수 있다. import React from 'react'; import Profile from './components/Profile'; function App() { return ( hello ); } export default App; 위의 JSX 문법은 아래의 자바스크립트 코드와 같다. import React from 'react'; import Profile from.. 재사용 가능한 리액트 컴포넌트를 구현하는 방법 리액트는 컴포넌트로 이루어져 있다. 모든 컴포넌트의 부모가 되는 index.js와 App.js를 시작으로 수많은 컴포넌트가 가지를 이뤄 뻗어 나간다. 컴포넌트 덕분에 개발자는 자연스레 기능 단위로 모듈을 만든다. 이펙트가 화려한 버튼 하나를 잘 만들어 놓으면 필요한 곳에서 쉽게 쓸 수 있다. 자바스크립트보다 훨씬 손쉽게 재사용 가능한 컴포넌트를 만들 수 있다. 그러나 의존성 없이 제대로 구현하지 않으면 본래의 재사용이 아닌 복사 붙여 넣기로 조금 다른 모듈을 새로 만드는 해프닝이 발생할 수 있다. 작은 앱에서야 상관없지만 복잡한 앱이 될수록 컴포넌트나 함수 등으로 잘 정리해 놓지 않으면 스스도 파악이 안 돼 손 쓸 수 없는 상태가 된다. 본 글에서는 어떻게 하면 위와 같은 문제를 피해 리액트 컴포넌트를 .. Create React App에서 SVG 파일을 간단히 불러오는 방법 아래와 같이 불러오면 컴포넌트처럼 활용할 수 있다. import React from 'react'; import { ReactComponent as Arrow } from '../assets/icons/arrow.svg'; const App = () => { return ( ); }; arrow.svg를 ReactComponent로 불러오고 이름을 Arrow로 바꿔서 fill이나 width 같은 속성을 넣을 수도 있다. React의 Virtual DOM이란? Virtual DOM은 DOM의 라이트 버전이라고 할 수 있다. 처음 렌더링이 될 때에 DOM과 VDOM이 생성된다. 이후 업데이트가 될 때마다 VDOM을 다시 생성하고 이전의 VDOM과 비교하여 어떤 객체가 달라졌는지 파악한다. VDOM은 가볍기 때문에 업데이트를 할 때마다 다시 생성한다고 해도 부담스럽지 않다. VDOM의 차이를 통해 알아낸, 변경이 필요한 객체를 실제 DOM에서 업데이트 한다. 이점 1. 다루기 무거운 DOM을 이용해서 달라진 점을 파악하지 않고 가벼운 VDOM을 비교하므로 어디를 업데이트 해야하는지 파악하는 데에 필요한 리소스를 줄일 수 있다. 2. 부분 변경시 전체를 업데이트 했던 이전 프레임워크를 극복하고 변경된 부분만 업데이트한다. 참고 : www.codecademy.com/.. 리액트 라우터의 기본 url(/)이 렌더링 되지 않게 하는 간단한 방법 리액트 라우터는 path의 url에 해당하는 컴포넌트를 렌더링 해준다. 그러나 시작하는 부분만 일치하더라도 렌더링해주는 방식이기 때문에 위의 경우 "/admin" url로 접근해도 만 렌더링 되는게 아닌 도 같이 렌더링이 된다. 때문에 보통 라는 모듈을 함께 써서 라우팅을 해주지만 간단하게 url이 정확히 일치할 때만 렌더링 되게 하려면 속성에 exact를 넣어준다. 이제 은 url이 "/" 일 때만 렌더링이 된다. 리액트에서 돔 엘리먼트를 변수로 참조하는 방법 function App() { const name = React.createRef(); // 변수를 먼저 선언한다. return ( // 선언한 변수를 참조하고 싶은 엘리먼트에 대입한다. // name.current와 같은 방법으로 엘리먼트를 참조할 수 있다. console.log(name.current.value)}>클릭 ); } 위 방법은 어쩔 수 없이 사용해야할 때에만 쓴다. 리액트 컴포넌트에 default props 설정 방법 때로는 props에 재사용을 위해서 가변적이지 않은 값을 넣어야할 때도 있다. 그럴 때에는 아래처럼 defaultProps에 property를 설정해준다. function Profile(props) { const { name } = props; return {name} } Profile.defaultProps = { name: 'socratone' } 이전 1 2 다음
