react9

• [Redux] 리덕스 키워드, 규칙 상태관리 라이브러리 redux 리덕스를 사용하게 될 경우의 장점 : 상태 관련 로직을 다른 파일들로 분리시켜서 더욱 효율적으로 관리가 가능. 프로젝트의 규모가 크다 , 비동기 작업을 자주 하게 된다, 사용하기 편하다 >> 리덕스 사용을 권장합니다. 리덕스에서 사용되는 키워드 1. 액션(Action) 상태에 어떤 변화가 필요하게 될 때, 액션을 발생시킵니다. 액션은 객체로 표현되며, 다음과 같은 형식으로 되어 있습니다. { type: "TOGGLE_VALUE" } type의 경우는 필수적으로 가지고 있어야 하고, 그 외의 값들은 개발자의 마음대로 넣을 수 있습니다. 2. 액션 생성함수(Action Creator) 액션 생성함수는 말 그래도 액션을 생성합니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만.. react 2023. 7. 24.

• 

  [React] 불변성이 뭘까? 불변성을 지켜야 하는 이유, 배열과 객체의 불변성을 지키는 방법. 불변성(Immutability)란 객체나 데이터 구조가 생성된 이후에는 변경되지 않음을 의미합니다. 즉, 한번 생성된 객체는 그 상태를 변경할 수 없는 것을 말합니다. 불변성은 수정 불가능한(Immutable) 데이터를 사용하고 데이터의 변경이 필요한 경우에는 새로운 객체나 데이터 구조를 생성하여 기존 데이터를 복사하고 수정하는 방식으로 처리합니다. 여러 이점과 효과를 가지고 있으며, 다음과 같은 특징을 가지고 있습니다. 1. 변경 추적 : 불변성을 유지하면 데이터가 변경될 때마다 새로운 객체나 데이터 구조가 생성되기 때문에 변경을 추적하기 쉽습니다. 이전 상태와 비교하여 변경 사항을 파악할 수 있습니다. 2. 예측 가능한 동작 : 불변성은 데이터의 상태 변화를 방지하므로 코드의 동작을 예측하기 쉽고 디.. react 2023. 5. 24.

• 

  [React] 부모에서 자식함수 부르기 ref 사용방법 이 글에서는 React의 ref가 무엇이고, ref를 사용하는 이유에 대해 얘기를 해 보며, 사용방법까지 다루려고 합니다. ref가 무엇일까요? ref는 reference 의 줄임말입니다. 참고, 참조 라는 의미로 주로 사용하고 있습니다. ref는 일반객체 입니다. react 프로젝트에서 콘솔로 찍어본다면, current 프로퍼티 하나를 가진 객체가 나타납니다. {current:null} React는 이 객체를 통해 DOM에 직접적인 접근을 가능하게 해 줍니다. export default class Test extends Component{ ref = React.createRef(); componentDidMount(){ console.log(this.ref.current.style.backgroundC.. react 2022. 5. 25.

• 

  [React] String을 html로 파싱하기 - dangerouslySetInnerHTML 회사 자체 컴포넌트를 사용하는 중에, 툴팁으로도 표현을 해야 하고 클릭 시 팝업을 띄워야 했는데 이 때 툴팁은 html태그가 인식되어 들여쓰기가 되는 반면에 팝업에서는 html태그까지 모두 string으로 나오는 것을 보았다. 이를 해결하기 위해서 구글링을 해 본 결과, 리액트에서는 다음과 같은 방법을 사용했다. dangerouslySetInnerHTML dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslyS.. react 2022. 2. 18.

• 

  [Redux] Action, Reducer, Store, Dispatch, Subscribe 2022.02.14 - [react] - [React] 리덕스 (Redux) vs Context API [React] 리덕스 (Redux) vs Context API 리덕스(Redux)는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 입니다. 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상 sewonzzang.tistory.com 리덕스에서 사용되는 키워드 1. 액션 Action 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생 시킵니다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이뤄져 있습니다. 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있.. react 2022. 2. 14.

• 

  [React] 리덕스 (Redux) vs Context API 리덕스(Redux)는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 입니다. 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있습니다. Context API vs Redux Context API ? - 전역적(global)인 데이터를 공유할 수 있도록 고안된 방법입니다. - 로그인 정보 또는 웹 사이트 내에 사용자 설정 파일, 테마, 언어 등을 컴포넌트 간 공유 데이터에 사용됩니다. - redux, react-router, styled-components와 같은 라이브러리들도 Context API기반으로 구현되었습니다. - 세가지 주요 개념 createContext, Provider, Consumer가 있습니다. -.. react 2022. 2. 14.

• 

  [React] super(props) class Checkbox extends React.Component { constructor(props) { super(props); this.state = { isOn: true }; }; // ... }; super (props) 사용 클래스 필드 문법을 사용한다면 사용하지 않아도 됩니다. class Checkbox extends React.Component { state = { isOn: true }; // ... }; 왜, super를 선언하는지, super를 사용하였을때 props를 넣어주지 않으면 어떤 일이 발생하는지 ...에 대해 작성해 보았습니다. super 선언하는 이유 javascript에서는 super 키워드 실행 후 this를 사용할 수 있게 했습니다. React도 마찬가지 입니다.. react 2022. 1. 5.

• 

  [React] 자주 사용되는 생명주기 메서드 render() render() 메서드는 클래스 컴포넌트에서 반드시 구현해야 하는 유일한 메서드입니다. 이 메서드가 호출되면 this.props 와 this.state 값을 활용하여 아래의 것 중 하나를 반환해야 합니다. -- React 엘리먼트 : 보통 JSX를 사용하여 생성됩니다. ex) 와 는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하려는 React 엘리먼트입니다. -- 배열과 Fragment : render()를 통하여 여러 개의 엘리먼트를 반환합니다. https://ko.reactjs.org/docs/fragments.html -- Protal : 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링합니다. https://ko.reactjs.org/docs/portal.. react 2022. 1. 5.

• 

  [React] React.Component React를 사용할 때 컴포넌트를 class 또는 함수로 정의할 수 있습니다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다. class Welcome extends React.Compoennt{ render(){ return Hello, {this.props.name} ; } } render() 는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드입니다. 컴포넌트 클래스를 직접 만들어서 사용하지 마세요. React 컴포넌트를 사용할 때에는 상속보다 합성을 주로 사용합니다. 컴포넌트 생명주기 모든 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. 마운.. react 2022. 1. 5.