본문 바로가기

분류 전체보기

 (62)
[JavaScript] undefined 와 null의 차이점 JavaScript에서 undefined 와 null 은 모두 "없다" 라는 것을 의미하지만 둘은 다른 값 입니다 undefined 와 null의 차이점에 대해서 알아보자undefinedvar 키워드로 선언한 변수는 암묵적으로 undefined로 초기화됩니다. 다시 말해, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(대부분 비어 있지 않고 쓰레기 값이 들어 있다)로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화 합니다. 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환됩니다. var foo;console.log(foo); // undefined 이처럼 undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바..
[React] useContext + ContextAPI란? React로 만든 앱은 여러개의 컴포넌트로 구성이 되어있습니다.부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터가 단계 별로 흐르게 됩니다.만약 최상단 앱에 아래와 같이 수많은 컴포넌트들이 존재할때 전역적인 데이터를 사용하고 싶다면은 props로 일일히 단계별로 전달한다면은 코드도 복잡해지고 만약 props가 변경이 된다면은 모든 컴포넌트에서 수정해야하는 번거로움이 존재합니다. 이를 해결하기 위해 React에서는 Context라는 개념이 나오게 되었습니다.Contextcontext를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되..
[React] List Key값이 필요한 이유 React에서 map 함수를 사용할때 해당 오류를 발견하신 적이 있을것입니다. Key 값을 Element의 자식에 넣어줄 때, index를 사용하는 방법이 있지만, 이는 공식 문서에서 추천하지 않는 방식이다. 그 이유는 무엇일까? {items.map((text, index) => { return ( {text.concat(items.length !== index ? ' ' : '')} ); })} 여기 input에 항목을 추가할때마다 List에 작성한 항목을 추가해주는 간단한 앱이 있습니다.function App() { const [inputValue, setI..
[React] useRef란 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..
[React] useEffect란 useEffect란어떠한 컴포넌트가Mount(화면에 첫 렌더링, 시작)되었을 때Update(재렌더링, 다시)되었을 때Unmount(화면에서 끝날 때, 종료) 되었을 때 특정 작업을 처리해주고 싶으면 사용하면 된다 useEffect함수는 콜백 함수를 받습니다.useEffect의 사용방법으로는 2가지가 존재하는데 첫 번째 방법useEffect(() => { // 실행하고 싶은 코드});- 렌더링이 될때마다 실행두 번째 방법(인자)useEffect(() => { // 실행하고 싶은 코드}, [value]);- 화면에 첫 렌더링이 될 때 실행- value값이 바뀔 때 실행 Clean Up  - 정리useEffect에 어떤 서비스를 구독하는 기능을 넣었다면, 나중에는 이 구독을 해지해주는 Clean Up(정리..
[React] useState + CallBack useState란 무엇인가?useState는 React훅 중의 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있습니다. 함수형 컴포넌트는 출력을 반환하는 함수로 상태를 갖지 않습니다. 하지만 useState를 통해 함수형 컴포넌트에서도 상태를 추가할 수 있습니다. useState를 통해 컴포넌트의 상태를 관리하고, 상태가 바뀔 때마다 React가 자동으로 UI를 업데이트해줍니다.함수형 컴포넌트란?함수형 컴포넌트는 React에서 UI를 정의하는 컴포넌트 유형중 하나로, props를 받아 JSX를 반환합니다. 이 JSX는 React가 화면에 그릴 요소들을 정의하는 데 사용됩니다. 함수형 컴포넌트의 가장 큰 특징은 순수 함수처럼 동작한다는 것입니다. 주어진 입력에 따라 항상 동일한 출력을 반환하며 오직 매개변..
[JavaScript] Async & Await이란 Async Async는 비동기 함수를 정의할 때 사용하는 키워드함수를 만들 때 사용하는 function 키워드 앞에다가 붙여주기. -> 비동기 함수가 됨. 그렇다면 이 함수와 일반 함수는 어떤 차이가 있을까? async function getUser() { return "kangNew";}const user = getUser();console.log(user); Async를 붙여주면 이 함수는 항상 프로미스를 리턴하는 '비동기 함수'가 됩니다. 함수 안에서 어떤 값을 리턴해주면 그 값은 프로미스로 감싸져서 반환됨. 그렇기에 getUser로부터 반환된 user는 프로미스가 됨. 출력해보면 프로미스 출력. 이제 'kangNew'라는 문자열에 접근하기 위해서는 프로미스에 'then'을 사용하면 됨. use..
[JavaScript] Promise 란 Promise란?비동기 처리에 사용되는 자바스크립트 객체, 비동기 작업이 맞이할 성공 혹은 실패를 나타냄 프로미스는 하나의 상자라고 볼 수 있음. 프로미스라는 상자는 비동기 작업이 시작될 때 만들어짐. 처음엔 상자가 텅 비어있다가 언젠가 결과물로 채워지게 됨. (비동기 작업이 완료될 때)    비동기 작업은 완료되기까지 시간이 좀 걸린다는 특징. 비동기 작업이 진행 중일 때는 프로미스 상자가 텅 비어있다. 그러다가 비동기 작업이 끝나면, 그 결과물로 프로미스 상자가 채워지게 됨. 이처럼 프로미스는 비동기 작업의 상태를 나타냄 진행 중인 비동기 작업은 언젠가 끝나게 됨. 작업이 성공할 수도 있고, 실패할 수도 있음. 예를 들어 서버로부터 데이터를 받아오는 비동기 작업이라고 가정했을 때, 데이터를 성공적으로..

티스토리툴바