na_0_i

이 글은 Kent C.Dodds의 useEffect vs useLayoutEffect 글과 Jaewang Lee의 [React] useEffect 와 useLayoutEffect 의 차이는 무엇일까? 글을 참고하여 작성되었습니다.https://kentcdodds.com/blog/useeffect-vs-uselayouteffecthttps://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5 useEffect 대부분의 경우 useEffect를 사용합니다. 클래스 컴포넌트의 component..

TIL(Today I Learned)/React 2024. 2. 19. 13:34

이 글은 kakaoTech의 '섬세한 ISFP의 코드 가독성 개선 경험' 영상을 보고 작성되었습니다. 1. 정확한 단어 고르기 1-1. 다른 뜻을 가진 단어와 구분하기 예시: load와 fetch const data = await loadData(); load는 가져와서 싣다 fetch는 가져오다 즉, loadData는 가져와서 싣는 것까지 완결된 상태이다. 이를 다시 data 변수에 할당하면 가져온다는 뜻이 중복된다. 좋은 예시 const data = await fetchData(); const success = await loadData(); react query 라는 data fetching 라이브러리 예시 isLoading과 isFetching이라는 변수를 지원한다. 이 때, 데이터가 없을 때 최..

TIL(Today I Learned)/그 외 2024. 2. 19. 13:26

[Javascript] DeepDive 7장 연산자 7장 연산자 7.1 산술 연산자 수학적 계산을 수행해 새로운 값을 만들고, 불가능할 경우 NaN 반환 7.1.1 이항 산술 연산자 피연산자의 값을 변경하는 부수 효과 X 7.1.2 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자 값을 만듦 증가, 감소(++ / --) 연산자는 부수효과 ㅇ(피연산자의 값을 변경하는 암묵적 할당) 증가/감소 연산자 전위 증가/감소 연산자 먼저 피연산자 값을 증가/감소 다른 연산을 수행 후위 증가/감소 연산자 다른 연산을 수행 후 피연산자 값을 증가/감소 예시 var x = 5, result; // 후위 // result에 x(5) 할당 // x += 1 result = x++; console.log(result, x..

TIL(Today I Learned)/모던 자바스크립트 Deep Dive 2022. 11. 17. 12:03

[Javascript] DeepDive 6장 데이터 타입 6.1 숫자 타입 자바스크립트에는 하나의 숫자 타입만이 존재한다. 모든 수를 실수로 처리하며 2진수, 8진수, 16진수를 위한 데이터 타입은 제공하지 않기 때문에 모든 값은 10진수로 해석된다. 자바스크립트 숫자 타입은 모든 수를 실수로 처리한다. 추가적으로, Infinity, -Infinitay, Nan 이라는 값도 표현할 수 있다. 6.2 문자열 타입 문자열은 '', "", `` 으로 텍스트를 감싼다. 문자열을 따옴표로 감싸는 이유는 키워드나 식별자와 구분하기 위해서이다. 6.3 템플릿 리터럴 템플릿 리터럴은 백틱(``)을 사용해 표현한다. 6.3.1 멀티라인 문자열 일반적인 문자열 내에서는 줄바꿈이 허용되지 않아서 이스케이프 시퀀스를 사용해야..

TIL(Today I Learned)/모던 자바스크립트 Deep Dive 2022. 11. 17. 10:56

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사합니다. 차이점 1. React 이벤트는 카멜 케이스를 사용 2. JSX를 사용해 문자열이 아닌 함수로 이벤트 핸들러 전달 3. false를 return 해도 기본 동작을 방지할 수 없기 때문에 preventDefault를 명시적으로 호출해야 함 HTML Activate Lasers Submit React Activate Lasers function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( Submit ); } https://ko.reactjs.org/docs/hand..

TIL(Today I Learned)/React 2022. 7. 21. 23:11

state는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다. 클래스의 생명주기 메서드 마운팅: 처음 DOM에 렌더링 될 때 언마운팅: 생성된 DOM이 삭제될 때 클래스 컴포넌트에서는 특별한 메서드를 사용하여 컴포넌트가 마운트 / 언마운트 될 때 일부 코드를 작동시킬 수 있고 이러한 메서드를 생명주기 메서드라고 불립니다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmou..

TIL(Today I Learned)/React 2022. 7. 21. 22:42

컴포넌트는 Javascript의 함수와 유사합니다. props라는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트는 props 객체 인자를 받은 후 React 엘리먼트를 반환하고 이러한 컴포넌트는 Javascript 함수이기 때문에 말 그래도 함수 컴포넌트라고 불립니다. ES6 class를 사용하여 컴포넌트를 정의할 수도 있으며 React 관점에서 두 유형의 컴포넌트는 동일합니다. 컴포넌트 추출 props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓도록 권장됩니다. UI 일부가 여러번 사용되거나 UI 일부가 자체적으로 복잡한 경우에는 별도의 컴포넌트로 만드는게 좋습니다. props는 읽기 전용 컴..

TIL(Today I Learned)/React 2022. 7. 21. 21:40

엘리먼트 엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술합니다. React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React 엘리먼트는 컴포넌트와는 다른 개념이며, 엘리먼트는 컴포넌트의 구성요소입니다. DOM에 엘리먼트 렌더링하기 리액트로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. (기존 앱에 통합하려는 경우 많은 수의 독립된 루트 DOM 노드가 있을 수도 있긴 합니다.) React 앨리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()에 엘리먼트를 전달합니다. const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); 렌..

TIL(Today I Learned)/React 2022. 7. 20. 22:43