반응형 React11 React 프로젝트 생성 - Webpack과 Babel 예전에는 React 설치가 좀 귀찮았다 Webpack, Babel 같은 모듈을 설치하고 설정해야했기 때문이다 근데 요즘에는 아주 간단하게 create-react-app [폴더명] 이라고만 하면 간단하게 설치되고 필요한 모듈까지 모두 들어가있다 그렇다고해서 Webpack, Babel이 뭔지 아예 모르고 지나가기엔 아쉬운 라이브러리들이다. 조금만 알아보자 Webpack은 여러개로 나누어져 있는 파일들을 자바스크립트 코드로 압축하고 최적화해주는 라이브러리임 장점으로는 1. 여러 파일을 압축하여 최적화해주기 때문에 로딩에 대한 네트워크 비용을 줄일수있음 2. 모듈 단위로 개발이 가능해서 가독성과 유지보수가 쉬움 Babel은 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형.. 2022. 2. 10. React 는 Component의 집합임 React는 Component의 집합이라고 생각하고 Component만 만든다고 생각하면 아주 간단하게 접근할 수있음 즉, 각각의 Component를 만들어서 레고 처럼 조립하는 것임 React에는 두가지 모양으로 Component를 만들수 있음 //클래스형 Component class App extends Component { render() { return 안녕하세요 } } //함수형 Component function App() { return 안녕하세요 } 요즘엔 React Hook 이라는게 나와서 함수형으로 많이사용하나 클래스형으로 개발 된 소스도 많고, 클래스형을 사용 할 때 더 좋을때도 있다. 그래서 두가지 형태를 모두 알아두면 좋다. 2022. 2. 10. React 해결책 : Warning: Each child in a list should have a unique "key" prop React를 하다가 방심하면 만나게되는 경고임 Warning: Each child in a list should have a unique "key" prop React list에서는 고유한 key를 써야한다고 알려주는 경고다. 왜 고유한 key를 써야하냐면 React에서 각각의 Component에 ID를 부여함으로써 ID가 동일하다면 Component가 변경되어 진게 아니기 때문에 다른 Component가 추가 되거나 위치이동이 일어나더라도 ID가 동일하다면 React는 불필요한 Rendering을 하지 않는다. 즉, 좋은 성능을 위해 이런 기능이 있단말임 그리고 주의 할 점은 ID를 지정 해줄 때, 배열의 Index를 사용하면 안된다. Index는 Component들의 위치이동이 있다면 동일한 Comp.. 2022. 2. 7. 이전 1 2 3 다음 반응형