Front-end School/React6 내가 보려고 만든 리액트(React) 면접질문 리액트는 UI구축을 위한 자바스크립트 프론트엔드 라이브러리이다. 주로 SPA(Single Page Application)을 만들 때 사용된다. 리액트의 장점에는 virtual DOM(가상 돔)을 사용해서 어플리케이션의 성능을 향상시키고, 클라이언트 사이드 렌더링이 가능하다. 또한 다른 프레임워크와도 사용이 가능하며, 컴포넌트의 가독성을 높이며 유지보수가 쉽다. 리액트의 장점 정리: 1. Single Page Application 페이지 전환같은 걸 부드럽게 할수있다. 2. component로 HTML 재사용이 편리하다. 3. 데이터가 html에 자동반영이 된다. 4. 다름 프레임워크와도 혼용이 가능하다. 리액트의 라이프사이클(생명주기)란? 모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 라이프사이클은 .. 2022. 4. 25. [React] props 사용하기 리액트에서 자주 사용하는 props에 대해 공부를 해보았다. 먼저 props 란 프로퍼티, props(properties의 줄임말)라고 한다. 상위 컴포넌트에서 자식 컴포넌트에 값을 전달할 때 사용한다. import './App.css'; function App() { return ( ); } function Name() { return ( 이름 나이 ); } export default App; 다음과 같은 코드를 작성해 주면 아래의 이미지와 같은 화면이 출력된다. 그렇다면 props를 사용하여 자식 컴포넌트인 Name으로 한 개의 프로퍼티를 넘겨보겠다. import './App.css'; function App() { return ( ); } function Name(props) { return ( {.. 2022. 3. 27. [React] map 함수 사용법 먼저 리액트 내부에서 같은 요소들을 반복해서 사용하고(반복문) 싶을 때 for문을 가장 먼저 떠올리기 쉽겠지만 우리가 잘 아는 JSX 문법 상에서는 {} 중괄호 안에 for 문이 작동하지 않는다. 물론 for문을 사용할 수 있는 방법이 있지만 오늘은 for문을 대체할 수 있는 map() 사용법에 대해서 공부를 해보았다. var arr = [2,3,4]; arr.map(function(a){ return a * 2 }); //결과 arr = [4,6,8] 위와 같이 먼저 arr이라는 배열은 선언을 해주고 map함수를 사용하여 콜백 함수를 사용해 a를 파라미터로 추가해주고 리턴 값을 만들어 준다. a라는 파라미터가 배열 안에 하나하나의 데이터라고 이해하면 쉽다. 본격적으로 map 함수를 사용해보도록 하자 i.. 2022. 3. 27. [React] styled components 사용하기 SASS를 배우고부터는 내가 지금까지 이용해오던 CSS가 얼마나 불편했는지.. 알게 되어서 너무나 신세계였던.. 기억이 있다..! 그런데 지금! SASS를 뛰어넘어 클래스 네임까지 지정해줄 필요가 없는 아니 그것보다는 정확하게 클래스 네임이 중복되는 불편함이 사라지는 styled components 를 알아보려고 한다! CSS in JS 먼저 CSS in JS라는 개념을 먼저 알고 가면 많은 도움이 될 것 같다. 기존 프로젝트는 프로젝트의 크기가 커질수록 모든 HTML 요소에 클래스 네이밍을 해줘야 하고, 컴포넌트 스타일을 변경할 때 클래스에 맞는 선택자를 일일이 찾아 변경해야 하는 번거로움이 있다. 또한 JS파일과 분리되어 있어 컴포넌트의 상태 값 변화를 공유하기가 어려웠다. 이러한 CSS의 불편함을 .. 2022. 3. 2. 이전 1 2 다음
