frontend (React) 개발17 (React) Parent 와 Child 컴포넌트간의 값 전달, 변경, 반영시키기 Child 를 품고 있는 Parent 컴포넌트에서 Child에 값을 전달하면 Child 안에서 값을 변경한 후, 변경한 값이 Parent 에도 동기가 되도록 할 필요가 있을 경우.예를 들면, Parent 가 서버에서 값을 가져와서 다이얼로그를 띄워 값을 변경하여 그 값이 Parent에 반영시킬 경우. Parentconst ParentComp = () => { const [values, setValues] = useState({"key1": "value1", "key2": "value2"}); useEffect(() => { // 서버에서 값을 가져온다면 // rest api get -> setValue( ... ) }, []); return ( cha.. 2023. 12. 1. (React) env 설정 ( 글로벌 변수) 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.. 2023. 11. 30. (React) Axios (vs Fetch) 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.. 2023. 11. 29. (React) VS Code Extension - React Component Splitter 열심히 코딩을 하다 보면 return 부분에 쓸데없이 엄청난 코드가 난립하여 코드 해석이 곤란할 경우가 많다. 되도록이면 잘게 화일로 나눠서 서브 컴포넌트화 하는게 바람직하다. 이럴때 자동으로 정리해 주는 VS Code 의 Extension 이 있다. "React Component Splitter" 로 검색하여 인스톨 하자. 사용법: 1. 새로운 서브 컴포넌트화 시키고 싶은 코드 영역을 선택 2. 마우스 우클릭하여 "Split to New Component" 메뉴를 선택 3. 새로운 서브 컴포넌트 이름을 입력 2023. 11. 23. 이전 1 2 3 4 5 다음
