[React/Hooks] useContext에 대하여

useContext context이용시, 트리 단게마다 명시적으로 props를 넘겨주지 않고도 컴포넌트가 값을 공유할 수 있다 useContext는 Context.Provider과 같이 사용된다 context를 써야하는 경우 예를 들어, 로그인한 유저, 테마, 선호하는 언어 등의 전역적 데이터를 공유할 때 (아래는 테마를 통한 예시) 기존 방식: 테마 인수를 명시적으로 넘겨주기 정보를 일일이 넘겨주고 있음 App > Toolbar > ThemedButton class App extends React.Component { render() { return ; } } function Toolbar(props) { return ( ); } class ThemeButton extends React.Componen..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 5.
• textsms

[React/Hooks] useEffect에 대하여

useEffect함수 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록함 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 되었음 useEffect() 작성법 useEffect(funtion, deps) fuction: 수행하고자 하는 작업 deps: 검사하고자 하는 특정 값에 대한 배열 혹은 빈 배열 *deps = dependency Component가 mount되었을 때 mount란 component가 가장 처음 렌더링 될 때다 deps위치에 [ ] 표기 혹은 배열표시 생략 예시코드 import React, {useEffect} from 'react'; useEffect( () => { //컴포넌트 화면에 가장 처음 렌더링 될 때, 한 번만..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 5.
• textsms

[React/Hooks] useState에 대하여

1. useState() 함수형 컴포넌트에서 상태를 관리하기 2. 사용법 리액트 패키지에서 useState 함수를 불러온다 import Ract, {useState] from ‘react’; useState함수 호출을 통해 배열을 반환시킨다 const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값); 상태 값 갱신 함수, setNumber 라고 지정해줬다고 치자. 여기엔 업데이트 할 새로운 값을 넣어줄 수 있다. setNumber(number+1) 기존 값을 업데이트 하는 함수를 넣어줄 수 있다. setNumber(preNum ⇒ preNum +1) 3. 예시 import React, {useState} from 'react'; function InputTest() { c..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 4.
• textsms

[CSS] 반응형 Header 만들기

초기 코드index.html Co-kgyury Home Tistory Github Velog Youtube   1️⃣ 목록 만들기ul:UnOrdered List목록화 되어있음을 나타내기 위함.이 안에 카테고리 목록이 될 리스트들을 작성해주자아무 의미 없는 div로 각 영역을 나타내기보다, ul로 나타내주자(li>a)*5 로 단축시켜 다섯 개를 불러낼 수 있다. ..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 3.
• textsms

[용어] IT에서의 Script, 스크립트언어 뜻

1️⃣ 어원 연극 용어로서의 Script 배우의 대사를 중점으로 배우의 표정 등장과 퇴장, 무대장치 중심으로 지시한 내용 즉, 배우의 행동을 지시하는 것과 같이 소프트웨어의 실행에 대한 지시 및 제어하는 것을 Script라고 일컫기도 한다 2️⃣ IT에서의 스크립트 뜻 다른 프로그램에 의해 번역되거나 수행되는 프로그램, 명령어들의 나열 스크립트 언어: 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도를 쓰이는 언어 즉, 배우의 행동을 지시하는 것과 같이 소프트웨어의 실행에 대한 지시 및 제어한다 인터프리터 방식을 위함 소스코드를 컴파일 하지 않고도 실행할 수 있는 프로그래밍 언어 Perl, JavaScript, jQuery, JSP, PHP, ASP, Python... 3️⃣ 스크립트 언어 (ftea..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 1.
• textsms

[React/Redux] redux의 action함수 사용하기

프로젝트에서 필요했던 react 관련 내용을 정리합니다 Redux의 액션함수 사용하기 1. createAction 파라미터로 전달받은 값을 객체에 넣어주는 작업에 대하여 자동화 시킴 예시코드 //기존 export const increment = (index) => ({ type: types.INCREMENT, index }); //함수사용 export const increment = createAction(types.INCREMENT); 단, createAction함수를 사용하면 기존의 파라미터(index)값이 무엇인지 모른다 따라서 파라미터로 전달받은 값을 액션의 payload값으로 설정해준다 만약 increment(5) 이었다면 다음의 객체가 생성되는 것이다 { type: 'INCREMENT', pa..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 17.
• textsms