꼰대코더

Child 를 품고 있는 Parent 컴포넌트에서 Child에 값을 전달하면 Child 안에서 값을 변경한 후, 변경한 값이 Parent 에도 동기가 되도록 할 필요가 있을 경우.예를 들면, Parent 가 서버에서 값을 가져와서 다이얼로그를 띄워 값을 변경하여 그 값이 Parent에 반영시킬 경우. Parentconst ParentComp = () => {   const [values, setValues] = useState({"key1": "value1", "key2": "value2"});      useEffect(() => {      // 서버에서 값을 가져온다면       // rest api get -> setValue( ... )    }, []);      return (     cha..

env 설정의 활용 ReactJS 프로젝트 내에서 사용할 글로벌 변수의 정의 github 에 프로젝트를 업로드하고자 하는 경우 -> .env 화일에 저장후 .gitignore 를 통해서 업로드에서 배제 인스톨 npm i --save-dev dotenv .env 화일을 프로젝트의 root 디렉토리에 생성 (src 폴더 NG) .env 화일내에 아래 샘플과 같이 정의 ( 반드시 REACT_APP_ 로 시작해야 하고, 값에는 쿼테이션 불필요 ) REACT_APP_BASE_URL=http://localhost:8000 REACT_APP_API_KEY=YOUR-API-KEY 프로젝트내 사용법 1. 변수명을 재정의한 (예) variables.js 파일을 생성하여 export 선언 export const BASE_U..

Axios 와 Fetch 의 간단한 차이점은 아래와 같다.Fetch 는 별도 인스톨 없이 사용가능하나 Axios 는 별도 인스톨 해야 한다.   npm install axiosFetch 는 브라우저 일부에서 지원하지 않고, 반면 Axios 는 모든 브라우저에서 지원한다.Axios 가 사용하기 쉽다.Axios 는 자동으로 JSON 데이터를 변환시켜 주지만, Fetch 는 .json() 을 사용해 변환한다.fetch('https://myapi.com/') .then(response => response.json()) .then(console.log);axios.get('https://myapi.com/') .then(response => console.log(response.data));Axios 는 .ca..

열심히 코딩을 하다 보면 return 부분에 쓸데없이 엄청난 코드가 난립하여 코드 해석이 곤란할 경우가 많다. 되도록이면 잘게 화일로 나눠서 서브 컴포넌트화 하는게 바람직하다. 이럴때 자동으로 정리해 주는 VS Code 의 Extension 이 있다. "React Component Splitter" 로 검색하여 인스톨 하자. 사용법: 1. 새로운 서브 컴포넌트화 시키고 싶은 코드 영역을 선택 2. 마우스 우클릭하여 "Split to New Component" 메뉴를 선택 3. 새로운 서브 컴포넌트 이름을 입력

useContext 는 여러층의 컴포넌트를 호출할 필요가 있지만 호출측의 데이터를 특정한 컴포넌트만에서 사용할 필요가 있을시 사용.(props를 쓰는 방법도 있지만 중간 계층의 콤포넌트들은 사용하지 않고 전달만 하는 측면에서 비효율적임)1. 사용방법    1.1 context 생성// context.js import { createContext } from 'react'; export const Context = createContext('Default Value');    1.2 context 제공        호출컴포넌트를 로 감싸고 value 를 전달import { Context } from './context'; function Main() {   const value = 'My Context..

component 간에 데이터를 전달할 때 사용 데이터를 받는 방법1. 받는 함수의 파라미터에 { 변수명1, 변수명2, ... } 을 명시// 호출측 greet="Welcome" who="John" /> // 받는측 function Message( { greet, who } ) {   return {greet}, {who}!; } 2. 받는 함수의 파라미터로 props 를 선언// 호출측 who="John"> // 받는측 function Hello(props) {   return Hello, {props.who}!; } 3. 받는측이 클래스의 경우// 호출측 // Render who="John" /> // 받는측 import { Component } from 'react'; class HelloAsCla..

초기값을 지정할 수도 없을 수도 있음.useRef() 를 호출하면 ref 오브젝트를 반환, 오브젝트는 유일한 프로퍼티 current 를 가지며 값을 참조 변경 할 수 있다.import { useRef } from 'react'; function MyComponent() {   const intervalRef = useRef(0);   const inputRef = useRef(null);   // ...   용도1. state와 달리 재렌더링은 유발하지 않고 단순히 변화된 값만 저장하고 싶을 경우return () 내에서의 사용은 자제해고 단순히 이벤트 함수내에서 값을 변경.import { useRef } from 'react'; export default function Counter() {      l..

useEffect 는 직접적인 타켓 출력을 하지 않는 작업으로서 fetch request, DOM 직접 조작, 타이머 함수등을 실행한다. ※ 함수 컴포넌트의 body에서는 값의 계산을 하고 이외의 작업( fetch request, DOM 직접 조작, 타이머 함수등)을 정의하지 않는것이 기본이다. 위의 작업을 side-effects 라고 부른다. useEffect(callback[, dependencies]);callback : 실행 함수, DOM 업데이트 후에 실행dependencies : 옵션 의존오브젝트 array. 만약 의존오브젝트가 렌더링 사이에 변화가 있다면  callback 함수가 실행된다. dependencies 가 없는 경우 useEffect(() => {    // 렌더링이 될때마다 실행..

useState 는 React class에서 사용하던 state 를 functional component  에서 간단히 사용가능하게 하는 React Hook중 하나이다. useState(초기값 또는 blank)를 콜 하면 [ 값을 가지는 변수, 변경 가능한 함수] 를 리턴하게 되는데 이들의 명명은 자유롭게 할 수 있지만 [statename, setStatename] 으로 하는게 일반적이다.state의 값은 setStatename 함수로 변경 할 수 있고, 변경후엔 화면이 자동으로 다시 렌더링하게 되어 state 변수를 사용한 컴포넌트들도 바뀌게 된다. ※ setStatename 함수에 의한 값은 비동기로 변경되기 때문에 아주 긴 string을 변경하여 바로 뒤 코드에서 statename을 들여다 보게 되..