[22.09.06] 소스트리 오류 해결, 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

소스트리 오류 해결

[Git/GitHub] - 소스트리(Sourcetree)에서 push시 토근 인증 요구[Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.] 오류 해결 방법

소스트리 이용해서 푸시를 하는데 오류가 났다

support for password authentication was removed

해결 방안

1. 깃허브 Settings / Developer Settings / Personal Access Token 들어가서 토큰 생성 후 토큰 복사해놓기

   한번 보여주고 잘 안보여주기 때문에 정보를 따로 저장해놔야 한다

2. 소스트리 들어가서 저장소 하나 클릭 후 저장소 설정

   

   왜 전체 모두 설정가능하게 안하고 프로젝트마다 번거롭게 설정해야 하는지 모르겠지만 일단은 프로젝트마다 설정해주는거로

3. 저장소 설정 창 경로를 수정해준다

   https://{Token}@github.com/~~~.git

   

자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

세작소에서도 구글링해서 해결했던 부분인데 지금도 사용해서 따로 정리해두려고!

방법을 간단하게 정리하면

1. 부모 컴포넌트에서 useState로 전달받은 데이터를 저장할 변수 선언
2. 부모 컴포넌트에서 자식 컴포넌트 호출할 때 useState의 setter로 데이터를 전달
3. 자식 컴포넌트에서는 부모로부터 전달받은 setter로 데이터를 저장해주면 된다

내 프로젝트 구조

App.js

|_ Menu.jsx

|_ Image.jsx

Menu에서 Image로 데이터를 보내줘야 하는 경우라서 생각해낸 방법이 App.js를 통해서 데이터를 전달해주는 방법이다.

1. Menu.jsx

   해당 데이터들이 변경될 때만 useEffect로 getData 함수를 호출해준다. 이렇게 한하면 App.js에서 무한 루프에 걸린다.

2. App.js

   getData()로 인자를 data에 저장해준다.

   return 해줄 때 Image의 props로 data를 전달해준다.

3. Image.jsx

   받아온 props를 분해해서 useState로 저장해준다.

   사실 안해줘도 될 것 같긴 한데 계속 props.🍇 처럼 선언하기 싫어서.

// Menu.jsx
function Menu({ getData }) {
	useEffect(() => {
		getData([🍇, 🍉]);
	}, [🍇, 🍉]);
})

// App.js
function App() {
	const [data, setData] = useState([]);

	const getData = (response) => { 
		setData(response);
	};

	return (
		<div className="App">
			<Title />
			<Menu getData={getData} />
			<Image data={data} /> 
		</div>
	);
}

// Image.jsx
function Image({ data }) {
	const [🍇, set🍇] = useState(0);
	const [🍉, set🍉] = useState('');

	useEffect(() => {
		set🍇(data[0]);
		set🍉(data[1]);
	}, [data]);
}

[React] 자식 컴포넌트에서 부모로 데이터 보내기