김평범's OrdinaryCode

📌React 컴포넌트(Component)의 역할 리액트에서는 화면에서 보이는 인터페이스를 설계할 때 '컴포넌트' 단위로 설계가 이루어진다. 컴포넌트는 가장 기본적인 템플릿으로 데이터를 받아서 화면에 필요한 UI형태로 띄워주는 역할을 한다. 리액트에서는 이런 컴포넌트 단위로 앱을 구성하게 된다. 리액트에서는 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 1️⃣함수형(Function) 컴포넌트 자바스크립트의 함수형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 ..

🔎서버사이드 랜더링이란? Server Side Rendering(SSR)로 브라우저에서 화면을 그려주는 주체가 서버인 경우이다. 반대의 개념으로는 Client Side Rendering(CSR)이 있다. 우리가 사용하는 react는 기본적으로 CSR을 이용한다. 하지만, SSR이 주는 장점들이 있어서 SSR 환경에서 개발이 필요할 때가 있다. 👏서버사이드랜더링(SSR) 장점 검색엔진(SEO) 최적화, 검색엔진에서 웹페이지 수집 가능 초기 렌더링 속도가 CSR에 비해 빠르다. 🥰Next.js 이용하기 서버사이드랜더링을 적용을 하려면 코드로도 가능하지만 Next.js라는 프레임워크를 이용하면 간단한 설정으로 SSR 설정이 가능해진다. 🙂Next.js 의 또 다른 장점은? 1️⃣코드스플리팅 코드스플리팅은 빌드..

혹시 Hooks을 처음 사용한다면? 앞의 강좌를 먼저확인해주세요 https://ordinary-code.tistory.com/120 [React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기 🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전 ordinary-code.tistory.com useEffect란? Hooks 기능 중 useEffect는 컴포넌트가 랜더링 될 때 특정 작업을 수행하게 한다. useEffect는 class 생명주기에서 componentDidMount와 componentDidUpd..

react Ref 이용하기 react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다. 오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다. react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다. 예시 코드 가장 기본적인 App 컴포넌트를 하나 만들어주었다. 이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다. import {Component} from "react"; class App extends Component { constructor(props) { super(props); this.state = { name:'이름' } } inputFocus = () =>{ this.se..

🐣 들어가기 전 해당 React Study는 아래 글에서 세팅한 프로젝트에서 진행 중입니다. 기본적인 Setting 내용을 보려면 아래글을 먼저 참고해주세요. ordinary-code.tistory.com/33 [React]React 자습하기 - 1. 프런트앤드흐름과 React의 기본 개념 🐣 FrontEnd 개발 언어의 흐름 jQuery의 부흥 2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다. 웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라 ordinary-code.tistory.com 오늘은 이제까지 미뤄두고 사용했던 JSX에 대해 좀 더 공부해보기로 했다. 기본적으로 JavaScript에서의 변수로 넣을 수 있는 값은 S..