맛동산이

리액트를 다루는 기술을 참고하여 기술하였습니다.개발을 하다보면 반복되는 코드를 작성할때가 존재한다.리액트에서는 for 반복문을 사용할수가 없기때문에 map() 함수를 사용해서 이를 효율적으로 관리하게 된다.자바스크립트 배열의 map()함수맵함수를 사용하기 위한 기본적인 형태는 다음과 같다.배열.map(function(a){ return '12345'})위와같이 입력하면 배열의 개수만큼 반복한다.a라는 파라미터는 배열에 있는 자료를 앞에서 부터 하나씩 가져온다.return문 안에 있는 것은 배열 a자료 a대신 array에 넣어줄 값을 반환해준다. map의 반환값은 배열이다. 컴포넌트를 다시 쓰고 싶을때{ 배열.map(function(){ return()}); }이렇게 하면 계속해서 배열의 개수만큼 컴포넌트..

리액트를 다루는 기술을 참고하여 기술하였습니다.state란?state란 리액트에서 컴포넌트 내부에서 바뀔수 있는 값을 의미한다.리액트는 state를 두가지로 나누는데 하나는 클래스형 컴포넌트에서 사용하는 state이며, 함수형 컴포넌트에서 사용하는 useState이다. 배열 비구조화 할당const array=[1,2] const one = array[0]; const two = array[1];이렇게 array에 있는 값을 one 과 two로 옮겨주고 싶을때 사용하는것이 배열 비구조화 할당이다.이를 다음과 같이 표현할수 있다.const array=[1,2]; const [one,two]=array; * one =array[0] * two =array[1]이렇게 표현이 가능하다. useStatestate는..

리액트를 다루는 기술을 참고하여 기술하였습니다.jsx란?jsx는 자바스크립트의 확장 문법이다.브라우저에서 코드가 실행되기 전 여러개의 모듈들이 합쳐지는 코드 번들링을 하게 되며 이때, barbel을 이용해서 일반 자바스크립트 형태의 코드로 변환한다. props부모 컴포넌트에서 state를 전달 받을때 사용함.const Mycomponent=(props)={ return 안녕하세요 제 이름은 {props.name} 입니다. }; Mycomponent.defaultProps ={ name : '기본이름'}; export default Mycomponent;이렇게 작성하게 되면, props가 없을 때도, 기본값을 정해줄수 있다.컴포넌트이름.defaultProps ={}; props는 컴포넌트에서 데이터를 보내..

리액트를 다루는 기술을 참고하여 기술하였습니다.DOM이란?DOM은 Document Object Model의 약자로, 객체로 문서 구조를 표현하는 방법이다. 사용하는 언어는 html이나 xml이다. html은 자체적으로는 정적이다. 하지만 우리는 자바스크립트를 통해 이를 동적으로 만들수 있다. 하지만 이러한 DOM의 경우에는 치명적인 단점이 존재하는데, 바로 규모가 커지면 DOM에 직접 접근햇을때, 변화를 주려고 하면 성능 이슈가 발생한다.하지만 DOM자체는 느린것이 아닌데, 왜 이런 문제가 생기는것일까?바로 DOM에서 변화가 생길때, 렌더링을 하는 시간이 걸리는것이다.이를 해결하기 위해서 virtual DOM을 사용하게 된다.virtual DOM앞서, dom을 직접적으로 조작할때, 연산이 많아지면 다양한..

리액트를 다루는 기술을 참고하여 기술하였습니다.왜 리액트 일까?mvc모델의 경우에는 어플리케이션의 규모가 크고 복잡해지면(massive ViewController) 화면의 업데이트를 하기 위해서는 상당한 관리가 필요하다. 이러한 문제점을 해결하기 위해서 페이스북 개발 팀에서 만든 프레임워크가 리액트이다. 💡리액트는 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아닌, 기존의 뷰를 제거하고 새롭게 렌더링 하는 방법을 택했다.즉, View만을 생각한 프레임워크라고 할수 있다. 렌더링리액트를 이해하기 위해서는 렌더링을 이해해야 하고 그중에서 “초기렌더링”과 “리렌더링”을 이해해야 한다. 렌더링이란 사용자 화면에 뷰를 보여주는 것을 의미한다. 초기 렌더링 리액트는 멘 처음에 어떻게 보일지를 정하는 ren..

리액트를 다루는 기술을 참고하여 기술하였습니다.자바스크립트자바스크립트 라는 언어는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 서버 사이드는 물론이며 모바일, 데스크톱 어플리케이션에서 엄청나게 활약하고 있는 언어다. 이러한 자바스크립트만으로 큰 어플리케이션을 만들수 있지만, 이를 구조화 하기 위해서 자바스크립트 기반의 다양한 언어들은 MVC 아키텍쳐, MVVM, MVW와 같은 아키텍쳐를 사용하는 것으로 어플리케이션을 구조화 하였다. MVC란?모델(model)-뷰(view)-컨트롤러(controller): 개발시 3가지 형태로 나누어서 개발하는 방법론이다. model : 모델은 어플리케이션이 “무엇”을 할지를 정의한다. 모델에 상태가 변화가 있을때, 컨트롤러와 뷰..

useMemo라는 기능이 있다. 앞서서 useEffect에 대해서 공부를 햇는데 복습을 다시 해보자면 useEffect는 어떠한 조건을 만족하거나 값이 변하거나 하면 리렌더링 하게 하는것이다. 반면에 우리는 전체 페이지를 리렌더링을 하게 되면 화면의 전환이 클테고 그렇게 되면 리액트를 사용한 웹 앱의 장점인 부드러운 전환이 잘 안될수도 있다. 이를 앞서서 위를 좀더 멋있는 말로 설명할수 있는데 메모라이제이션(memorization) memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다...

useEffect는 리액트 컴포넌트가 렌더링 될 때 마다 특정작업을 실행할 수 있도록 하는 hook이다. 그냥 뭐 새로고침 될때마다 뭔가 실행되게 한다고 생각하면 좀 쉬울지도? 아무튼 형태는 다음과 같다. useEffect(function, deps) *function = 수행하고자 하는 작업 (함수) *deps = 검사하고자 하는 값 또는 배열 렌더링 될때마다 실행시 useEffect(function, []) 한번 렌더링 될때 처음 딱 한번 실행시 =배열에 아무것도 안넣음. 하지만 빈배열 useEffect(function, []) 특정 props 나 state가 변경될 때 실행시???, =특정값일때 실행 useEffect(function, [바뀌는값]) 여기에서 뭔말인가 싶은데 특정 props나 sta..

리엑트에서는 두가지 방법을 통해서 새로운 페이지로 이동할수 있는데 방법은 아래와 같다. Link useNavigate 얼핏보면 둘다 결국은 다른페이지로 가기 위해서 주소값을 반환해주는 것이라고 생각할수 있지만, 큰 차이점이 존재한다. 바로 useNavigate는 함수라는것. 사용법에 앞서서 먼저 라이브러리를 설치해야한다 npm install react-router-dom --save Link 회원가입 이렇게 하게 되면 회원가입이라는 글에 링크가 걸리게 되고 누르게 되면 /home으로 이동하게 된다.html에서 a 태그와 거의 동일. 해당 url을 통해서 이동하게된다. 링크를 사용하기 위해서는 라우터 혹은 컴포넌트에서 바로 이동할수 있게 한다. useNavigate function Login(){ cons..