강신규

오프라인 환경에서 React 개발 환경을 구축해야 하는 상황은 보안이 중요한 기업 환경이나 인터넷 접근이 제한된 환경에서 자주 발생합니다. npm-packages-offline-cache와 yarn install --offline을 사용하여 인터넷이 없는 환경에서 패키지를 다운받을 수 있는 방법을 알려드리겠습니다. 외부망(인터넷 연결) 환경에서 진행해야 할 작업- Node.js와 Yarn이 설치되어 있어야 합니다- React 프로젝트가 생성되어 있어야 합니다- 모든 필요한 패키지의 캐시 파일을 미리 다운로드해야 합니다 내부망(오프라인) 환경으로 이전할 파일- 프로젝트 소스 코드- `.yarnrc` 설정 파일 - `npm-packages-offline-cache` 폴더 (패키지 캐시) - `package...

React로 만든 앱은 여러개의 컴포넌트로 구성이 되어있습니다.부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터가 단계 별로 흐르게 됩니다.만약 최상단 앱에 아래와 같이 수많은 컴포넌트들이 존재할때 전역적인 데이터를 사용하고 싶다면은 props로 일일히 단계별로 전달한다면은 코드도 복잡해지고 만약 props가 변경이 된다면은 모든 컴포넌트에서 수정해야하는 번거로움이 존재합니다. 이를 해결하기 위해 React에서는 Context라는 개념이 나오게 되었습니다.Contextcontext를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되..

React에서 map 함수를 사용할때 해당 오류를 발견하신 적이 있을것입니다. Key 값을 Element의 자식에 넣어줄 때, index를 사용하는 방법이 있지만, 이는 공식 문서에서 추천하지 않는 방식이다. 그 이유는 무엇일까? {items.map((text, index) => { return ( {text.concat(items.length !== index ? ' ' : '')} ); })} 여기 input에 항목을 추가할때마다 List에 작성한 항목을 추가해주는 간단한 앱이 있습니다.function App() { const [inputValue, setI..

useRef란함수형 컴포넌트에서 useRef를 부르게 되면 ref Object를 반환해주는데 반환된 객체는 다음과 같이 생겼습니다.const ref = useRef(value){ current : value } ref Object언제든 우리가 원하는 값으로 변경이 가능합니다.const ref = useRef("hello")ref.current = "hi"ref.current = "nice" 반환된 ref는 컴포넌트 전 생애 주기에 유지가 됩니다 -> 컴포넌트가 계속 랜더링 되어도 컴포넌트가 언마운트 되기 전까지 값을 유지한다는 얘기 useRef는 대표적으로 다음과 같은 상황에서 많이 사용됩니다. 1. 어떠한 값을 저장하는 저장공간으로 사용ref안에 있는 값은 아무리 변경을 해도 렌더링을 막는다는 점sta..

useEffect란어떠한 컴포넌트가Mount(화면에 첫 렌더링, 시작)되었을 때Update(재렌더링, 다시)되었을 때Unmount(화면에서 끝날 때, 종료) 되었을 때 특정 작업을 처리해주고 싶으면 사용하면 된다 useEffect함수는 콜백 함수를 받습니다.useEffect의 사용방법으로는 2가지가 존재하는데 첫 번째 방법useEffect(() => { // 실행하고 싶은 코드});- 렌더링이 될때마다 실행두 번째 방법(인자)useEffect(() => { // 실행하고 싶은 코드}, [value]);- 화면에 첫 렌더링이 될 때 실행- value값이 바뀔 때 실행 Clean Up  - 정리useEffect에 어떤 서비스를 구독하는 기능을 넣었다면, 나중에는 이 구독을 해지해주는 Clean Up(정리..

useState란 무엇인가?useState는 React훅 중의 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있습니다. 함수형 컴포넌트는 출력을 반환하는 함수로 상태를 갖지 않습니다. 하지만 useState를 통해 함수형 컴포넌트에서도 상태를 추가할 수 있습니다. useState를 통해 컴포넌트의 상태를 관리하고, 상태가 바뀔 때마다 React가 자동으로 UI를 업데이트해줍니다.함수형 컴포넌트란?함수형 컴포넌트는 React에서 UI를 정의하는 컴포넌트 유형중 하나로, props를 받아 JSX를 반환합니다. 이 JSX는 React가 화면에 그릴 요소들을 정의하는 데 사용됩니다. 함수형 컴포넌트의 가장 큰 특징은 순수 함수처럼 동작한다는 것입니다. 주어진 입력에 따라 항상 동일한 출력을 반환하며 오직 매개변..

리렌더링이란 무엇인가?리렌더링은 React 컴포넌트가 자신의 UI를 다시 그리는 과정을 말합니다. 이는 컴포넌트의 상태나 속성이 변경되었을 때 발생하며, React는 이전 렌더링 결과와 새로운 결과를 비교하여 실제 DOM에 필요한 변경사항만을 적용합니다. 리렌더링이 발생하는 경우1. 상태(state)변경: 컴포넌트의 상태가 변경이 되었을 때2.속성(props) 변경: 부모 컴포넌트로부터 전달받는 props가 변경 되었을때3.부모 컴포넌트의 리랜더링: 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 기본적으로 리렌더링 상태(state)변경의 최적화컴포넌트를 실행을 하게되면 useState에 값을 Fiber Node에 저장을 하게 됩니다. 만약에 setState를 통해 값이 변경이 된다면 저장했었던 Fibe..

프로젝트 진행중 index에 따라 원하는 곳으로 navigation 하는 코드를 짜게 되었다. 내가 누른 것에 따라 index를 저장하는것은 useState생각밖에 나지않았기 때문에 아래처럼 선언하고 const [selectedIndex, setSelectedIndex] = useState(0); { setSelectedIndex(0); navigation.navigate('ProductGuideScreen', { productType: productListType[selectedIndex], }); } productListType에는 index에 따라 내가 넘기기 원하는 ListType이 저장되어 있다. 0번을 누르면 productListType[0]이 넘어가도록 하였다. 하지만 내가 원하는 대로 동작..