📌 SPA란 ? (single page application)SPA는 하나의 페이지로 만들어진 어플리케이션을 의미합니다. html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax 통신을 통해서 처리합니다. 브라우저에서 사용자가 상호작용하면 필요한 부분만 업데이트해서 처리하게 됩니다. 또한 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 하지만 SPA에도 단점이 존재합니다 🥹앱의 규모가 커지면 JS파일도 너무 커져서 로딩이 오래 걸리게 됩니다. 그로 인해 브라우저에서 렌더링이 완료되기까지 빈 화면이 나오게 됩니다.따라서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요)   📌 라우팅이란 ?라우팅은 브라우저..

📌 React 스타일링⓵ 태그에 직접 디자인 적용하기스타일 속성 중에 -로 연결된 속성은 카멜표기법으로 대체하여 적어줍니다.안녕하세요? ⓶ 일반 css파일에 디자인 후 import 기능을 통해 연결하기📍--- App.css .app-title { border: 1px solid #777; color: red;}-------------------------------------------------------📍--- App.jsimport './App.css'; //--- css파일 importfunction App() { css파일로 디자인하기 }export default App; ⓷ css 모듈 사용하기파일은 '컴포넌트명.module.css' 형식으로..

📌 훅(Hook)이란 ?리액트 훅은 React 16.8버전에 새로 추가된 기능으로 함수형 컴포넌트에서 사용되는 기술을 의미하며 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능입니다. 예시로는 useState, useEffect가 있습니다.   📌 훅의 규칙Hook은 반복문, 조건문, 중첩된 함수 내에서 실행하면 안되고 최상위 scope에서만 호출해야합니다.  이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장받을 수 있습니다. 또한 함수형 컴포넌트에서만 Hook을 호출해야합니다.   📌 반드시 알아야 하는 기본 훅✔︎ useState(초기값)배열을 반환하는 함수이며 첫번째 배열 요소에는 현재값을, 두번째 배열 요소에는 상태를 변경..

📌 Map 함수목록 요소들을 반복 처리할 때에는 map 함수를 사용하고, 반복 컴포넌트에는 반드시 key props를 전달해야합니다. ✔︎ key란 ? map함수를 호출할 때 콜백함수의 인자로 넘어오는 index값으로 컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용하는 키워드입니다. 만약 key가 지정되지 않았다면 가상 DOM을 순차적으로 비교하면서 변경사항을 감지하기 때문에 key가 없을때보다 속도가 느립니다.  아래는 키가 설정되지 않았을 때 나타나는 console창입니다.key값을 지정하지 않는다고해서 화면이 렌더링되지 않는 것은 아닙니다. 하지만 콘솔창에 이와 같이 유니크한 key prop값을 입력하라고 경고문을 남겨주네요.자 그러면 key를 설정하러 가봅시다! ..

📌 이벤트 규칙이벤트의 이름은 모두 카멜 표기법으로 표현됩니다. ( onkeyup → onKeyUp )이벤트를 전달할 때에는 { 함수 } 형태로 사용합니다.   📌 input값 핸들링 해보기 1. input의 값이 변화되는 이벤트(onChange)를 연결합니다.2. 이벤트 안 첫번째 매개변수에서 event객체를 활용합니다. (e.target.속성값 활용가능)3. setter 함수를 이용해서 state를 변경합니다4. value 속성을 이용해서 state동기화 처리합니다. state를 통해 input의 value를 제어하지 않으면 에러가 발생할 수 있습니다.따라서, input에 value={상태값}을 처리해주어야합니다. ⓵ useState를 여러개로 관리하기let [name, setName] = use..

📌 State란 ?컴포넌트 내부에서 바뀔 수 있는 값을 의미하며 state의 변화를 감지하여 리렌더링을 수행합니다. state는 어떤 타입이든 상관 없으며 여러개일 수도 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트에서 사용하는 방법은 다릅니다. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능합니다. useState는 함수형 컴포넌트에서만 사용할 수 있는 hook으로 배열을 반환하는 함수입니다.[0]번째에는 현재 데이터, [1]번째에는 값을 변경하는 setter함수가 위치하는데 아래의 코드를 확인합니다.let result = useState('초기값'); //--- 구조분해할당 전let data = result[0]; //--- datalet setData = result[1]; ..

📌 컴포넌트란 ?리액트의 컴포넌트는 트리형 구조로 함수형, 클래스형으로 분류됩니다. 함수형 컴포넌트에 대해서 살펴보겠습니다.⓵ 하위컴포넌트에 외부에서 사용할 모듈 이름을 지정하고 ⓶ 상위컴포넌트에서 모듈을 불러오는 방식을 사용합니다.📍--- App.js (상위)function App() { return ( );}export default App;📍--- NewJeans.js (하위)function NewJeans(props) { return Hello! {props.name};} NewJeans를 여러번 렌더링 하는 App컴포넌트를 만들 수 있으며 이를 컴포넌트 합성이라고 하는데 코드의 재사용성을 높일 수 있습니다. 위와 같이 ..

📌 JSX란 ?JS의 확장 문법으로 html에 js 코드를 녹여낸 확장자의 형태입니다. 코드를 수정하면 자동으로 리렌더링됩니다. (webpack의 역할)이때, Webpack Loader는 직접 설치 및 설정 가능하고 보일러플레이트로 생성 시 자동으로 설정됩니다. Webpack Loader는 다양한 종류가 있습니다.- css 로더 : css를 로드합니다.- file 로더 : 폰트, 이미지, 파일 등을 로드합니다.- babel 로더 : ES6문법을 ES5문법으로 다운그레이드합니다. (webpackConfig.js)   📌 JSX 문법✔︎ VS Code(Visual Studio Code)에서는 Alt + Shift + A를 사용하여 JSX 주석을 작성할 수 있습니다.{/* JSX의 주석은 이렇게 사용합니다..

📌  리액트(React) 란? 리액트는 자바스크립트 라이브러리입니다. 구조가 MVC, MVVM과 같은 다른 프레임워크와는 다르게 오직 View만 처리합니다.  📌 SPA (Single Page Application) 란 ?ndex.html하나만 로드하고 실행시키는 구조이며 nodeJs의 Webpack이 이용됩니다. (프로젝트를 생성하면 자동 포함됩니다.)이때, Webpack이란 ? 어플리케이션을 동작시키는데 필요한 자원(JS파일, CSS, Image 등)을 하나로 묶어 경량화하여 결과물을 만들어주는 도구입니다.   📌 DOM (Document Object Model) 이란 ? DOM은 HTML 문서 구조의 계층을 표현하기 위해 트리 구조로 만들어진 객체이며 하나의 최상위 노드(Node)에서 다른 자..