![]()
들어가면서 리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있습니다. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수입니다. 동시에 순수함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻합니다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊이 연관된 부분입니다. 우선 불변성이란 개념을 이해하고 왜 지켜주는지 그 이유와 방법을 알아보겠습니다. 목차 1. 불변성이란 무엇일까 2. 왜 리액트에서 불변성을 지켜야하나 3. 어떻게 불변성을 지키는가 불변성이란 무엇일까 사전적으로 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다. 하지..
![]()
cryptoJS 사용하는 법 지금부터 plan text를 암호화 하는 방법을 알아보겠습니다. 우선 Work Flow를 읽어보며 흐름을 잡으시고, 예시를 보면서 사용법을 익혀보겠습니다! Work Flow 1. npm i crypto-js 설치 npm i crypto-js 2. import crypto from 'crypto-js' import crypto from 'crypto-js'; 3. Encrypt const ciphertext = CryptoJS.AES.encrypt('암호화할 값', 'secret key').toString(); *secret key는 서버개발자와 공유하는 키값이다. 4. Decrypt const bytes = CryptoJS.AES.encrypt(ciphertext, 'secr..
의존성배열 1. useEffect(effect) ==> 컴포넌트가 렌더링될 때마다 호출됩니다. 2. useEffect(effect, []) ==> 첫 번째 렌더링 후에만 호출됩니다. 3. useEffect(effect, [userId]) ==> 첫 번째 렌더링 후에 호출되며, 이후에 userId가 변경될 때마다 호출됩니다. 3번에서 userId 라는 값은 항상 렌더링과 관련된 값이어야 합니다. `렌더링과 관련된 값` 이라는 것은 그 값이 변경되면 컴포넌트가 다시 렌더링 되는지를 보고 알 수 있습니다. 어떤 변수의 값이 변경됐는데 컴포넌트가 다시 렌더링되지 않는다면 그 변수는 deps 배열에 넣을 필요가 없습니다. 결국 `렌더링과 관련된 값` 이라는 것은 컴포넌트 상태값, 속성값 등을 말하는거구요. 전역 ..
들어가기전 리액트 함수 컴포넌트의 10가지 반환값을 알아보겠습니다. 1. div요소 안녕하세요 2. 컴포넌트 3. 문자열 "안녕" 4. 숫자 1 5. 배열 ['안녕'] 6. null null 7. boolean {false} {true} 8. 배열안 요소 [안녕,하슈] 배열은 key값이 필요. 리액트가 가상돔에서 연산을 효율적으로 하도록 돕는다. 9. 안녕 하슈 // React.Fragment 생략가능 안녕 하슈 리액트 문법상 모든 코드를 감싸는 태그가 있어야합니다. 은 실제 돔에는 반영이 되지 않아 렌더링되지 않습니다. 감싸는 태그가 불필요할 때 대신하여 쓸 수 있습니다. * 의 축약형 : 10. ReactDOM.createPortal {ReactDOM.createPortal( p>안녕하세요 좋은 아침..
